1、noParse
noParse 配置项可以让 Webpack 忽略对部分没采用模块化的文件的递归解析和处理，这样做的好处是能提高构建性能。 我们对类似jq这类依赖库，一般会认为不会引用其他的包(特殊除外,自行判断)。所以，对于这类不引用其他的包的库，我们在打包的时候就没有必要去解析，这样能够增加打包速率。
noParse 是可选配置项，类型需要是 RegExp、[RegExp]、function 其中一个。例如想要忽略掉 jQuery 、ChartJS，可以使用如下代码：
module:{ // 使用正则表达式 noParse: /jquery|chartjs/ // 使用函数，从 Webpack 3.0.0 开始支持 noParse: (content)=> { // content 代表一个模块的文件路径 // 返回 true or false return /jquery|chartjs/.test(content); } }
2、HappyPack
基本原理： HappyPack 允许 Webpack 使用 Node 多线程进行构建来提升构建的速度。
安装 HappyPack
npm i -D happypack
webpack.config.js配置文件
const HappyPack = require('happypack'); const os = require('os'); const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); module.exports = { module: { rules: [ { test: /\.js$/, //把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行 use: ['happypack/loader?id=happyBabel'],//这里的id=happyBabel要跟下边的对应 //use: ['babel-loader'], //排除node_modules 目录下的文件 exclude: /node_modules/ }, ] }, plugins: [ new HappyPack({ //用id来标识 happypack处理那里类文件 id: 'happyBabel',//这个id值要跟上面对应 //如何处理 用法和loader 的配置一样 loaders: ['babel-loader?cacheDirectory=true'], // loaders: [{ // loader: 'babel-loader?cacheDirectory=true', // }], //共享进程池 threadPool: happyThreadPool, //允许 HappyPack 输出日志 verbose: true, }) ] }
这里需要注意HappyPack 对大项目能缩短打包时间，对小项目可能还会增加打包时间，注意取舍。
3、DllPlugin
webpack dllplugin的配置其实就是用于生成动态链接库。
创建一个打包配置文件webpack.config.dll.js
const path = require('path'); const webpack = require('webpack'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin') function resolve (dir) { return path.join(__dirname,'..' ,dir) } module.exports = { entry: { vueAll: ['vue','vue-router','axios','vuex'] }, output: { path: resolve('public'), filename: 'dll_[name].js', library: 'dll_[name]_[hash]' }, devtool: false, plugins: [ new CleanWebpackPlugin({}),//清楚打包 new webpack.DllPlugin({ // manifest文件中的name属性值, 需与output.library保持一致 name: 'dll_[name]_[hash]', // mainfest文件输出路径和文件名称 path: path.resolve(__dirname, "[name]-manifest.json") }), new UglifyJsPlugin({//压缩功能 uglifyOptions: { warnings: false, drop_debugger: true, drop_console: true }, // sourceMap: config.build.productionSourceMap, sourceMap: false, parallel: true }) ] }
我们执行上面的文件
"build:dll": "webpack --config build/webpack.config.dll.js" //根据自己的配置写
这样就会打包出一个dll_vueAll.js（是'vue','vue-router','axios','vuex'的包）和vueAll-manifest.json（是对应关系）的文件。
既然这里我们已经把'vue','vue-router','axios','vuex'打包好了，那么其他地方打包就应该把这几个文件排除。这样就需要webpack.DllReferencePlugin
plugins: [ new webpack.DllReferencePlugin({ manifest: require('./vueAll-manifest.json'),//这里路径根据自己文件目录书写，文件名就是上步打包出来的 }) ]
这样配置后打包时候就会把'vue','vue-router','axios','vuex'排除在外。在此还需要把已经打包好的dll_vueAll.js引入到模板文件index.html里。可以手动添加，但是太麻烦，我们用插件add-asset-html-webpack-plugin。
首先安装，然后配置
plugins: [ new AddAssetHtmlPlugin({ filepath: require.resolve('../public/dll_vueAll.js'), // 文件输出目录 outputPath: 'dll',//根据自己情况填写 publicPath: 'dll',//根据自己情况填写 includeSourcemap: false 这个配置需要注意 })
这样就会自动引入了。（需要注意new AddAssetHtmlPlugin需配置在new HtmlWebpackPlugin后边）
<body> <div id="app"></div> <script src="./dll/dll_vueAll.js"></script> </body>
