几个webpack打包优化的方法

2022-08-09 21:10:49

为什么要优化打包？

项目越做越大，依赖包越来越多，打包文件太大
单页面应用首页白屏时间长，用户体验差

我们的目的

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

优化方式

1、按需加载

1.1 路由组件按需加载
1.2 第三方组件和插件。按需加载需引入第三方组件
1.3 对于一些插件，如果只是在个别组件中用的到，也可以不要在 main.js 里面引入，而是在组件中按需引入

2、生产环境关闭 sourceMap

3、代码压缩

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

4、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" />
</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。