webpack性能优化之打包优化

1、禁止生成 sourceMap 文件

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

module.exports ={
  productionSourceMap:false,// 默认为true
}
1
2
3

2、关闭 Prefetch

vuecli-3 默认开启 Prefetch 预加载模式，提前获取用户可能会访问的内容。在首屏会把这十几个路由文件都下载下来（不会影响首屏加载速度，只会优化子页面）

3、路由懒加载

4、UI 组件库按需加载

5、CDN 加载外部资源

在我们的项目中通常会使用到很多的第三方库，这些插件往往都是不会作更改的，所以我们可以选择将这些插件库使用CDN引入的方式，而不将这些库打包到我们的项目目录中。（vue、vuex、axios，vue-router）可以使用webpack的 externals，它可以忽略掉不需要打包的库

module.exports = {
  configureWebpack: config => {
    config.externals = {
      vue: "Vue",
      "vue-router": "VueRouter",
      axios: "axios",
    }
  }
}
1
2
3
4
5
6
7
8
9

(注意：在书写键值对时，值是第三方库作者定义的名字是不可修改的，如果把值名书写错误那么控制台会直接抛出错误。 例如：
“vue-router”:“vue-router” //这是错误的书写方式
“vue-router”: “VueRouter” //这是正确的书写方式
当你在使用外部CDN加速时若项目抛出错误，你可以检查你的键值对的书写是否正确以此来排除你的BUG )

6、gzip 文件压缩 compression-webpack-plugin

const webpack = require("webpack")
const CompressionWebpackPlugin = require("compression-webpack-plugin")
const productionGzipExtensions = ["js", "css"]

module.exports = {
  configureWebpack: (config) => {
    const plugins = []
    //start 生成gzip压缩文件
    plugins.push(
      // Ignore all locale files of moment.js
      new webpack.IgnorePlugin(/^\.\/locale$/,/moment$/),

      // 配置compression-webpack-plugin压缩
      new CompressionWebpackPlugin({
        algorithm: "gzip",
        test: new RegExp("\\.(" +productionGzipExtensions.join("|") + ")$"),
        threshold: 10240,	//对10K以上的数据进行压缩
        minRatio: 0.8,
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5,
        minChunkSize: 100,
      })
    )
    //end 结束生成gzip压缩文件
    config.plugins = [...config.plugins, ...plugins]
  }
}
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

7、代码压缩 uglifyjs-webpack-plugins，去除console.log打印以及注释

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';
 
configureWebpack: config => {
   const plugins = [];
   if (isProduction) {
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注释
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']//移除console
            }
          }
        })
      )
   }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

8、图片压缩 image-webpack-loader

// 默认设置
const defaultOptions = {
  bypassOnDebug: true
}
// 自定义设置
const customOptions = {
  mozjpeg: {
  	progressive: true,
 	 	quality: 50
  },
  optipng: {
  	enabled: true,
  },
  pngquant: {
  	quality: [0.5, 0.65],
  	speed: 4
  },
  gifsicle: {
  	interlaced: false,
  },
  // 不支持WEBP就不要写这一项
  webp: {
  	quality: 75
  }
}

chainWebpack: config => {
  // …
  config.module.rule(‘images’)
  .test(/.(gif|png|jpe?g|svg)$/i)
  .use(‘image-webpack-loader’)
  .loader(‘image-webpack-loader’)
  .options(customOptions) //默认配置就defaultOptions 这个
  .end()
  //…
  }
  }
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
35
36
37