vue-cli3项目打包优化

原始包大小

以下主要操作都在文件 vue.config.js 下进行，如没有此文件，就在项目根目录下新建。

1.去掉 .map 文件

.map 文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
有了 .map 就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

操作：

module.exports = {
  // ...
  productionSourceMap: false,
}

包大小：

2.图片压缩

此操作会压缩图片质量，选择使用

操作：

npm install image-webpack-loader --save-dev

module.exports = {
  // ...
  chainWebpack: config => {
    // ...
    config.module
      .rule('images')
      .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          bypassOnDebug: true
        })
        .end()
  },
}

包大小：

3.去除console

代码中 console.log 越多，效果越明显，可选择使用。

操作：

npm install uglifyjs-webpack-plugin --save-dev

module.exports = {
  // ...
  chainWebpack: config => {
    if (process.env.NODE_ENV !== 'production') {
      config
        .plugin('uglifyjs-plugin')
        .use('uglifyjs-webpack-plugin', [{
          uglifyOptions: {
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']
            }
          }
        }])
        .end()
    }
  }
}

包大小：

4.CDN加速

维护上不受控制，所以只把那些不可能改动的代码或者库分离出来，通过CDN加速加载。

为了避免使用CDN遇到坑，建议使用可靠的CDN。

此项选择使用。不建议使用。

操作：

module.exports = {
  // ...
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 分离不常用资源库
      config.externals = {
        'vue': 'Vue',
        'vue-router': 'VueRouter'
      }
    }
  }
}

    <script src="https://cdn.jsdelivr.net/npm/[email protected]">script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js">script>

包大小：

5.开启Gzip压缩

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度，可以减小60%以上的体积。

注意：这个需要服务器配合开启Gzip，也可打包时不配置，直接在服务器端进行Gzip压缩。

操作：

npm install compression-webpack-plugin --save-dev

module.exports = {
  // ...
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config
        .plugin('gzip-plugin')
        .use('compression-webpack-plugin', [{
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: /\.js$|\.html$|\.json$|\.css$|\.ttf$/,
          threshold: 0, // 只有大小大于该值的资源会被处理
          minRatio:0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: true // 删除原文件
        }])
        .end()
    }
  }
}

包大小：