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>
网友评论