优化webpack打包文件体积的小妙招

现在网上有很多关于压缩webpack体积的方案，接下来就通过一个小项目，就是在vue-cli3的基础上安装了vue，vue-router和vuex这些包，来对这些方案进行尝试，来试试这些方案可以达到什么样的优化效果吧！

安装项目

//全局安装vue-cli
npm install -g @vue/cli
//创建项目
vue create vue-frame
//进入项目文件
cd vue-frame
//安装依赖包
npm install
//安装vue,vue-router和vuex
npm install vue vuex vue-router -S
//启动下
npm run serve

一切准备就绪，我们执行下npm run build来看下打出来的包的大小。

初始打包大小.png

这个文件过大的原因在于webpack打包会将js和css各自集中打包成一个文件，也就是vender.js和app.css，这两个文件包含整个项目的代码，当页面的加载的时候，是将vender.js和app.css全部加载完毕后才会显示，所以优化项目的目标就是减少/拆分这两个文件。

第一步：去除map文件

map文件是用于在开发的时候方便调试的，在生产环境要关闭。不然会暴露代码造成安全隐患，而且打包文件过大。

productionSourceMap: false

去除map文件.png

第二步：使用CDN加载静态文件

使用CDN加载静态文件的好吃就是不让静态文件打包进webpack的，从而减少打包文件的体积，这里需要配合externals使用，目前项目可以抽离vue，vue-router和vuex这些包，首先需要在vue.config.js里面配置externals。

configureWebpack:{
  externals: {
      'vue':'Vue',
      'vue-router':'VueRouter',
      'vuex':'Vuex'
  }
}

其次在index.html中通过CDN引入

记得配置完以上两项之后要记得要移除node_modules中对应的依赖。

npm uninstall vue vue-router vuex -S

使用CDN加载静态文件.png

第三步：路由懒加载

路由懒加载的作用就是把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

{
  path: '/about',
  name: 'about',
  component: () => import('./views/About.vue')
}

路由懒加载不会减少整体文件的体积，但是它对于加快首屏加载速度非常关键。因为使用懒加载的话组件分割成不同的代码块，目前只要加载完首页的代码块页面就会展现出来。

第四步：去除console.log

如果项目中使用了大量的console.log，并且发布的时候没有及时清除，这时候如果手动清除的话也不是很方便，这时候就可以用terser-webpack-plugin来优化项目。

npm install terser-webpack-plugin -D

在vue.config.js里面配置

configureWebpack: (config)=>{
  if(process.env.NODE_ENV === 'production'){
    config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
  }
}

第五步：开启gzip压缩

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。

安装插件

npm i -D compression-webpack-plugin

vue.config.js配置

const CompressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV !== 'production') return;
    return {
      plugins: [
        new CompressionWebpackPlugin({
          test: /\.js$|\.html$|\.css/, //匹配文件名
          threshold: 10240,  //对超过10K的文件进行压缩
          deleteOriginalAssets: false //是否删除源文件
        })
      ]
    }
  }
}

执行完压缩命令后，就会看到生成的文件以gz为后缀的资源文件

开启gzip压缩.png

不过还需要对服务器进行配置，根据Request Headers的Accept-Encoding标签进行鉴别，如果支持gzip就返回.gz文件