编译时间太长

项目为多页面应用时，编译的时候每个入口都会读取依赖的路径，所以入口越多，会导致编译越慢

公用库提取

除了公用的框架（如 Vue、React）以外，不同页面所需要的第三方库可能不一样，而且部分第三方库（如富文本编辑器、SDK）仅在特定页面引用。全部打包为 vendor 会导致其他页面也加载不必要的第三方库，增加加载时间

优化方案1

特定页面的第三方库直接引入 CDN 文件，不经过 webpack 读取路径
这样能特定的页面加载特定的第三方库，在页面加载 vendor 时不会浪费过多的时间
但是，这样并不能解决编译时间太长

优化方案2

使用 webpack 的 plugin：DllPlugin 和 DllReferencePlugin
这两个插件可以将公共的第三方库打包为 Dll (动态链接库)，同时由 Dll 告诉 webpack ，哪些库不需要读取及打包， webpack 就不会在每次编译时都重复读取依赖，可以减少大量的编译时间。
同时由于提取了公用库，每个页面仅加载最基础的库（如 Vue、Vuex、Vue-Router），可以减少加载时间。
特定的页面引入特定的第三方库，可由 CDN 引入

DllPlugin 和 DllReferencePlugin 使用方法

创建 webpack.vendor.build.conf.js 文件

// webpack.vendor.build.conf.jsconst path = require("path")const webpack = require("webpack")const config = require(‘./config‘)process.env.NODE_ENV = ‘production‘ // 将 NODE_ENV 设置为 production 可减少依赖的大小function resolve (dir) { ???return path.join(__dirname, ‘..‘, dir)}module.exports = { ???entry: { ???????vendor: config.common.vendor // 公用第三方库 ???}, ???output: { ???????path: resolve(‘dll‘), ???????filename: ‘[name].js‘, ???????library: ‘[name]‘ ???}, ???plugins: [ ???????new webpack.DefinePlugin({ ?????????‘process.env‘: { ???????????NODE_ENV: JSON.stringify(process.env.NODE_ENV), ??????????} ???????}), ???????new webpack.DllPlugin({ ???????????path: resolve(‘dll/manifest.json‘), ???????????name: ‘[name]‘ ???????}), ???????// 压缩代码 ???????new webpack.optimize.UglifyJsPlugin({ ?????????compress: { ???????????warnings: false, ???????????pure_funcs: [‘console.log‘] ?????????}, ?????????sourceMap: true ???????}), ???]}

运行 node webpack.vendor.build.conf.js 会在上级目录生成 dll 文件夹，里面有 vendor.js 及 manifest.json

接着，在构建文件中增加

// webpack.prod.conf.js// ...const manifest = require(‘../dll/manifest.json‘)const AddAssetHtmlPlugin = require(‘add-asset-html-webpack-plugin‘)module.exports = { ???// ... ???// 引入 manifest，让 webpack 跳过公用库 ???new webpack.DllReferencePlugin({ ?????manifest ???}), ???// 将 vendor 注入到 生成的 html 模板中 ???new AddAssetHtmlPlugin({ ?????filepath: path.resolve(__dirname, ‘../dll/vendor.js‘), ?????includeSourcemap: false, ?????// hash: true, ???})}

webpack 3 优化

原文地址：https://www.cnblogs.com/NKnife/p/10109243.html