VUE CLI3项目优化

CLI3项目优化

版本信息

时间：2019年01月17日09:41:29

vue: 3.1.0

webpack: 4.28.4

node:11.0.0

原始包信息

1.png

1.去除map文件

map文件是js文件压缩后，文件的变量名替换对应、变量所在位置等原信息数据文件。个人理解是：对js压缩过程的记录，如浏览器支持，可以通过map文件还原文件到未压缩之前。
文件vue.config.js

增加以下代码
productionSourceMap: false,
打包查看：

2.png

2.CSS分离

文件vue.config.js

增加以下代码：

  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },

3.png

3.图片压缩

文件vue.config.js

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

增加以下代码：

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

打包查看：

4.png

这段代码做了两件事：一是压缩，二是转Base64
可以发现在dist/img下面的图片少了一部分，原因是：不超过4096字节会被转换成Base64编码,用require引用的也会被转成和base64，超出这个限制则会被打包在img文件夹下。

4.公共代码抽离

文件vue.config.js

增加以下代码：

 configureWebpack: () => ({
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendor:{
            chunks:"all",
                test: /node_modules/,
                name:"vendor",
                minChunks: 1,
                maxInitialRequests: 5,
                minSize: 0,
                priority:100,
          },
          common: {
            chunks:"all",
            test:/[\\/]src[\\/]js[\\/]/,
            name: "common",
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority:60
          },
          styles: {
            name: 'styles',
            test: /\.(sa|sc|c)ss$/,
            chunks: 'all',
            enforce: true,
          },
          runtimeChunk: {
            name: 'manifest'
          }
        }
      }
    }
  }),

这里抽取了项目中公共的css、js部分，还有其他的，可以自行匹配test（正则）
查看效果：

5.png

注意：目前项目中的动态路由加载使用上仍然不合理，后续待优化。

5.CDN

注意：不建议使用，重点是维护上不受控制。

6.GZip

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.

意思是这些文件大于了244kb，可以使用Gzip在压缩一次

npm i -D compression-webpack-plugin

文件vue.config.js

增加以下代码：

plugins:[
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.js$|\.html$|\.json$|\.css/,
        threshold: 0, // 只有大小大于该值的资源会被处理
        minRatio:0.8, // 只有压缩率小于这个值的资源才会被处理
        deleteOriginalAssets: true // 删除原文件
      })
    ],

查看效果：

6.png

注意：目前测试环境服务器未开启Gzip，所以原文件不能删除，deleteOriginalAssets：false.
再次修改上述代码：
const needGzip = process.env.NODE_ENV === 'production' && process.env.VUE_APP_BASE_URL !== '/falcon-controller/'

     if (needGzip) {
      const plugins = []
      plugins.push(
          new CompressionWebpackPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.css$|\.ttf$|\.html$|\.svg$|\.json$|\.js$/,
            threshold: 0, // 只有大小大于该值的资源会被处理
            minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
            deleteOriginalAssets: true// 删除原文件
          }),
      )
      config.plugins = [
          ...config.plugins,
          ...plugins
        ]
    }

压缩后会有文件路径的变动，要要修改，更改filename即可

现在再编译检查：npm run build

7.png