Prettier 和 Eslint

  • 安装 Prettier
1
npm install prettier -D
  • 配置 Prettier

根目录下创建.prettierrc定义规则

1
2
3
4
5
6
7
8
9
10
11
{
  "singleQuote": true,
  "tabWidth": 4,
  "semi": false,
  "trailingComma": "none",
  "endOfLine": "auto",
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "bracketSameLine": true,
  "printWidth": 130
}

package.json中添加命令定义范围

1
2
3
"scripts": {
    "format": "prettier --write  \"src/**/*.ts\" \"src/**/*.vue\" \"src/**/*.less\""
}
  • 安装 Eslint
1
npm i eslint -D
  • 初始化 Eslint
1
npx eslint --init

在最后Would you like to install them now?选择no

  • 安装依赖
1
npm i -D eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint-config-prettier eslint-plugin-prettier
  • 配置 Eslint

根目录下的.eslintrc.cjs定义规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-essential',
    'plugin:prettier/recommended',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'vue'],
  rules: {
    'vue/multi-word-component-names': 0,
  },
  ignorePatterns: ['dist/**', 'node_modules/**', 'coverage/**'],
}

package.json中添加命令定义范围

1
2
3
"scripts": {
    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
}

打包优化

GZIP 和打包可视化

  • webpack
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
npm install webpack-bundle-analyzer -D
npm install compression-webpack-plugin -D

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin(),
      new CompressionWebpackPlugin({
        test: /\.(js|css)$/,
        algorithm: 'gzip',
        threshold: 10240, // 超过10kb的文件就压缩
        deleteOriginalAssets: false,
        minRatio: 0.8
      })
    ]
  }
})
  • vite
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
npm install vite-plugin-compression -D
npm install rollup-plugin-visualizer -D

import { visualizer } from 'rollup-plugin-visualizer'
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  plugins: [
    visualizer({
      open: true,
      filename: "stats.html",
      gzipSize: true
    }),
    viteCompression({
      algorithm: 'gzip',
      threshold: 10240
    })
  ]
})

CDN

  • webpack
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 首先在config配置
module.exports = defineConfig({
  configureWebpack: {
    externals: {
      'echarts': 'echarts',
      'axios': 'axios',
      'moment': 'moment',
      'js-cookie': 'Cookies'
    }
  }
})

// 然后在index.html配置
<body>
  <div id="app"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.common.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.min.js"></script>
</body>
  • vite
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
npm install vite-plugin-cdn-import -D

import importToCDN from 'vite-plugin-cdn-import'
export default defineConfig({
  plugins: [
    importToCDN({
      modules: [
        {
          name: 'monaco-editor',
          var: 'monaco',
          path: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.34.0/min/vs'
        }
      ]
    })
  ]
})