Vue 3 编译慢 包分析

转：Vue 项目编译时间过长问题 - 简书

1. 使用 webpack-bundle-analyzer 分析项目外部依赖大小

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer

官网显示的使用方法，需要在 webpack.config.js 内配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

而我们的项目是使用 vue-cli3 搭建，其内置 webpack （也就是没有 webpack.config.js），因此我们找到 vue.config.js 使用如下代码引入插件：

// vue.config.js
module.exports = {

  chainWebpack: config => {
    //*//
    config
      .plugin('webpack-bundle-analyzer')
      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  },
}

此时运行 yarn serve 会执行 webpack-bundle-analyzer 插件 BundleAnalyzerPlugin 的默认功能

 serve 完成，会在浏览器自动生成依赖大小分析的可视化网站，如下图所示

 

2. 使用 webpack 外部扩展(externals)

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖

使用前打包时间

 

使用 externals 过滤我们希望通过 cdn 引入的依赖，同样在 vue.config.js 配置：
（注意所需依赖的别名）

// vue.config.js
module.exports = {

  chainWebpack: config => {
    //*//
    config.externals({
      'axios': 'axios',
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'element-ui': 'ELEMENT' // 注意此处要全大写且 Vue.use(ELEMENT)
    })
  },
}

而后在项目 index.html 文件内引入对应 cdn

<!-- public/index.html -->
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.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.1/vuex.min.js">
  <script src="https://cdn.bootcss.com/element-ui/2.3.3/index.js"></script>

需要将原来的引用注释，我们的过滤才能生效

// import Vue from "vue"
// import Element from "element-ui"

再次使用 webpack-bundle-analyzer，可以看到依赖的体积减少了近 10 M

 

使用后打包时间

再次打包，打包时间缩短了近一倍

 

未完待续。。。

深入：Webpack 大法之 Code Splitting

---

参考
vue-cli3 使用 webpack-bundle-analyzer 插件;
解决 vue 打包 wendor 过大的问题