总结几个webpack打包优化的方法这是我参与更文挑战的第6天，活动详情查看：更文挑战背景：为什么要优化打包项目越

这是我参与更文挑战的第6天，活动详情查看：更文挑战

背景：为什么要优化打包

项目越做越大，依赖的包越来越多，打包文件太大，编译时间过长
但页面应用首屏加载时间过长，用户体验差

达到的效果

减少打包后文件的大小
首页要按需加载引入文件
优化webpack打包时间

优化方式

按需加载

路由组件按需加载

     const router = [{
     path: '/index',
     component: resolve => require.ensure([], () => resolve(require('@/components/index')))
     },
     {
      path: '/about',
      component: resolve => require.ensure([], () => resolve(require('@/components/about')))
     }
    ]

第三方组件和插件。按需加载需引入第三方组件

// 引入全部组件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
 
// 按需引入组件
import { Button } from 'element-ui'
Vue.component(Button.name, Button)

对于一些插件，如果只是在个别组件中用的到，也可以不要在 main.js 里面引入，而是在组件中按需引入

// 在main.js引入
import Vue from vue
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
 
// 按组件按需引入
import { Vuelidate } from 'vuelidate'

优化loader配置

优化正则匹配
通过 cacheDirectory 选项开启缓存
通过 include、exclude 来减少被处理的文件。

module: {
 rules: [
  {
   test: /\.js$/,
   loader: 'babel-loader?cacheDirectory',
   include: [resolve('src')]
  }
 ]
}

优化文件路径——省下搜索文件的时间

extension 配置之后可以不用在 require 或是 import 的时候加文件扩展名,会依次尝试添加扩展名进行匹配。
mainFiles 配置后不用加入文件名，会依次尝试添加的文件名进行匹配
alias 通过配置别名可以加快 webpack 查找模块的速度。

resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
 }
},

生产环境关闭 sourceMap

sourceMap 本质上是一种映射关系，打包出来的 js 文件中的代码可以映射到代码文件的具体位置,这种映射关系会帮助我们直接找到在源代码中的错误。
打包速度减慢，生产文件变大，所以开发环境使用 sourceMap，生产环境则关闭。

代码压缩

UglifyJS: vue-cli 默认使用的压缩代码方式，它使用的是单线程压缩代码，打包时间较慢
ParallelUglifyPlugin: 开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成

plugins: [
 new UglifyJsPlugin({
  uglifyOptions: {
   compress: {
    warnings: false
   }
  },
  sourceMap: true,
  parallel: true
 }),
 
 new ParallelUglifyPlugin({
  //缓存压缩后的结果，下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回，
  //cacheDir 用于配置缓存存放的目录路径。
  cacheDir: '.cache/',
  sourceMap: true,
  uglifyJS: {
   output: {
    comments: false
   },
   compress: {
    warnings: false
   }
  }
 })
]

提取公共代码

相同资源重复被加载，浪费用户流量，增加服务器成本。
每个页面需要加载的资源太大，导致网页首屏加载缓慢，影响用户体验。

//webpack4 使用 splitChunks 的实现：
module.exports = {
 optimization: {
  splitChunks: {
   cacheGroups: {
    vendor: {
     priority: 1, //添加权重
     test: /node_modules/, //把这个目录下符合下面几个条件的库抽离出来
     chunks: 'initial', //刚开始就要抽离
     minChunks: 2 //重复2次使用的时候需要抽离出来
    },
    common: {
     //公共的模块
     chunks: 'initial',
     minChunks: 2
    }
   }
  }
 }
}

CDN 优化

随着项目越做越大，依赖的第三方 npm 包越来越多，构建之后的文件也会越来越大。
再加上又是单页应用，这就会导致在网速较慢或者服务器带宽有限的情况出现长时间的白屏。 1、将 vue、vue-router、vuex、element-ui 和 axios 这五个库，全部改为通过 CDN 链接获取，在 index.html 里插入相应链接。

<head>
 <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" rel="external nofollow" />
</head>
<body>
 <div id="app"></div>
 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
 <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
 <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
 <!-- built files will be auto injected -->
</body>

2、在 webpack.config.js 配置文件

module.exports = {
 ···
  externals: {
   'vue': 'Vue',
   'vuex': 'Vuex',
   'vue-router': 'VueRouter',
   'element-ui': 'ELEMENT',
   'Axios':'axios'
  }
 },

3、卸载依赖的 npm 包，npm uninstall axios element-ui vue vue-router vuex 4、修改 main.js 文件里之前的引包方式

// import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// import VueRouter from 'vue-router'
 
import App from './App.vue'
import routes from './router'
import utils from './utils/Utils'
 
Vue.use(ELEMENT)
Vue.use(VueRouter)
 
const router = new VueRouter({
 mode: 'hash', //路由的模式
 routes
})
 
new Vue({
 router,
 el: '#app',
 render: h => h(App)
})

总结

比较实用的方法: 按需加载，优化loader配置，关闭生产环境的sourceMap，CDN优化。 vue-cli已做的优化：代码压缩，提取公共代码，再优化空间不大。根据项目实际需要和自身开发水平选择优化方法，必须避免因为优化产生bug。