以下大部分配置均添加在vue.config.js

    • 生产环境自动删除console，debugger，警告 ```javascript // 安装插件 npm install uglifyjs-webpack-plugin

    // 在vue.config.js文件中添加配置 configureWebpack: config => { // 为生产环境修改配置… if (process.env.NODE_ENV === ‘production’) { config.plugins.push( new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_console: true, drop_debugger: true } }, parallel: true, sourceMap: false }) ) } }

    2. - 设置插件的按需引入（参考各插件自己的说明）
    4. <br />
    6. - 优化公共SCSS文件的引入
    7. ```javascript
    8. css: {
    9.   loaderOptions: {
    10.     sass: {
    11.       // 引入全局变量样式
    12.       data: `@import "@/path/yourScss.scss";`
    13.     }
    14.   }
    15. }

    • 去除预加载，代码压缩

      1. chainWebpack: config => {
      2. if (process.env.NODE_ENV === 'production') {
      3.   config.plugins.delete('prefetch');
      4.   config.plugins.delete('preload');
      5.   config.optimization.minimize(true);
      6. }
      7. }

    • 公共代码提取，CDN引入

      1. // 添加配置
      2. configureWebpack: () => {
      3. return {
      4.   externals: {
      5.     vue: 'Vue',
      6.     vuex: 'Vuex',
      7.     'vue-router': 'VueRouter'
      8.   }
      9. }
      10. }
      11. // 然后在html里引入cdn即可使用 例：<script src="cdnPath" />

    • 开启gzip压缩 ```javascript // 安装 npm i -D compression-webpack-plugin

    // 引用 const CompressionWebpackPlugin = require(‘compression-webpack-plugin’)

    // 使用 configureWebpack: () => { return { plugins: [ new CompressionWebpackPlugin({ algorithm: ‘gzip’, test: /.js$|.html$|.css/, threshold: 10240, minRatio: 0.8 }) ] } } ```