如何提高 webpack 构建 Vue 项目的速度

最新推荐文章于 2024-03-30 08:00:00 发布

红色枫叶520

最新推荐文章于 2024-03-30 08:00:00 发布

阅读量433

点赞数

分类专栏： vue 文章标签： webpack vue构建速度

本文链接：https://blog.csdn.net/weixin_43347113/article/details/99726382

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

执行 npm run build 构建项目的时候极其慢，然后就引起我的注意了。在项目中，引入了比较多的第三方库，导致项目大，而每次修改，都不会去修改到这些库，构建却都要再打包这些库，浪费了不少时间。所以，把这些不常变动的第三方库都提取出来，下次 build 的时候不再构建这些库，这样既可大大缩短构建时间

利用 webpack 的插件 DllPlugin 和 DllReferencePlugin

如何实现

配置文件在 build 文件夹中新建 webpack.dll.config.js (项目基于 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
   }
  })
 ]
};

2.然后在 package.json 中配置命令

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

3.执行 npm run build:dll 命令
生成 vendor.dll.js 和 vendor-manifest.json
4.需要在 index.html 引入 vendor.dll.js

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

5.vendor-manifest.json 的内容大概如下：

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

6.webpack.base.config.js 中通过 DLLReferencePlugin 来使用 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')
    }),
  ]
}

提示
但是存在一个问题，当把太多的第三方依赖都打包到 vendor.dll.js 中去，该文件太大也会影响首屏加载时间。所以要权衡利弊，可以异步加载的插件就没有必要打包进来了，不要一味的把所有都打包到这里面来获取构建时的快感。

红色枫叶520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何提高 webpack 构建 Vue 项目的速度

执行 npm run build 构建项目的时候极其慢，然后就引起我的注意了。在项目中，引入了比较多的第三方库，导致项目大，而每次修改，都不会去修改到这些库，构建却都要再打包这些库，浪费了不少时间。所以，把这些不常变动的第三方库都提取出来，下次 build 的时候不再构建这些库，这样既可大大缩短构建时间利用 webpack 的插件 DllPlugin 和 DllReferencePlugin如...
复制链接

扫一扫