快捷導(dǎo)航

詳解如何提高 webpack 構(gòu)建 Vue 項(xiàng)目的速度

更新時(shí)間：2017年07月03日 17:28:24 作者：林鑫

這篇文章主要介紹了詳解如何提高 webpack 構(gòu)建 Vue 項(xiàng)目的速度，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

最近有人給我的 Vue2 后臺(tái)管理系統(tǒng)解決方案提了 issue ，說(shuō)執(zhí)行 npm run build 構(gòu)建項(xiàng)目的時(shí)候極其慢，然后就引起我的注意了。在項(xiàng)目中，引入了比較多的第三方庫(kù)，導(dǎo)致項(xiàng)目大，而每次修改，都不會(huì)去修改到這些庫(kù)，構(gòu)建卻都要再打包這些庫(kù)，浪費(fèi)了不少時(shí)間。所以，把這些不常變動(dòng)的第三方庫(kù)都提取出來(lái)，下次 build 的時(shí)候不再構(gòu)建這些庫(kù)，這樣既可大大縮短構(gòu)建時(shí)間。那么要怎么去實(shí)現(xiàn)呢？

解決方案

DllPlugin 和 DllReferencePlugin

查找了一下資料，發(fā)現(xiàn)我們可以利用 webpack 的插件 DllPlugin 和 DllReferencePlugin 來(lái)實(shí)現(xiàn)我們要的功能。

DllPlugin 可以把我們需要打包的第三方庫(kù)打包成一個(gè) js 文件和一個(gè) json 文件，這個(gè) json 文件中會(huì)映射每個(gè)打包的模塊地址和 id，DllReferencePlugin 通過(guò)讀取這個(gè)json文件來(lái)使用打包的這些模塊。

接下來(lái)就看如何實(shí)現(xiàn)。

配置文件

在 build 文件夾中新建 webpack.dll.config.js (項(xiàng)目基于 vue-cli 的)

const path = require('path');
const webpack = require('webpack');

module.exports = {
 entry: {
  vendor: ['vue/dist/vue.common.js','vue-router', 'babel-polyfill','axios','vue-echarts-v3']
 },
 output: {
  path: path.join(__dirname, '../static/js'),
  filename: '[name].dll.js',
  library: '[name]_library'    // vendor.dll.js中暴露出的全局變量名
 },
 plugins: [
  new webpack.DllPlugin({
   path: path.join(__dirname, '.', '[name]-manifest.json'),
   name: '[name]_library'
  }),
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false
   }
  })
 ]
};

然后在 package.json 中配置命令

"scripts": {
  ...
  "build:dll": "webpack --config build/webpack.dll.conf.js"
}

執(zhí)行 npm run build:dll 命令來(lái)生成 vendor.dll.js 和 vendor-manifest.json

需要在 index.html 引入 vendor.dll.js

<body>
  <div id="app"></div>
  <script src="./static/js/vendor.dll.js"></script>
</body>

vendor-manifest.json 的內(nèi)容大概如下：

{
 "name": "vendor_library",
 "content": {
  "./node_modules/core-js/modules/_export.js": {
   "id": 0,
   "meta": {}
  },
  ...
}

接下來(lái)就在 webpack.base.config.js 中通過(guò) DLLReferencePlugin 來(lái)使用 DllPlugin 生成的 DLL Bundle

var webpack = require('webpack');

module.exports = {
  entry: {
    app: ['./src/main.js']
  },
  module: {
    ...
  }
  // 添加DllReferencePlugin插件
  plugins: [
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, '..'),
      manifest: require('./vendor-manifest.json')
    }),
  ]
}

原先 build 需要 95446ms，配置之后執(zhí)行 build 只需 14360ms，減少了 75% 的時(shí)間。

但是存在一個(gè)問(wèn)題，當(dāng)把太多的第三方依賴都打包到 vendor.dll.js 中去，該文件太大也會(huì)影響首屏加載時(shí)間。所以要權(quán)衡利弊，可以異步加載的插件就沒(méi)有必要打包進(jìn)來(lái)了，不要一味的把所有都打包到這里面來(lái)獲取構(gòu)建時(shí)的快感。

示例地址：vue-manage-system

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: