前面我们讲解了webpack的进阶配置等。
接下来我们讲解webpack的简单优化。1：noParse
在webpack配置中添加 noParse选项：
module:{
noParse:/jquery/,
},
如上表示，webpack在打包的时候，不去加载jquery中的依赖库。也是第一个我们对webpack的优化方法。
2：ignorePlugin
需要使用webpack内置插件：
let webpack = require("webpack");
webpack.config.js中
plugins:[
new webpack.IgnorePlugin(/\.\locale/,/moment/)
]
上述代码表示，我们在引入语言包的时候，将这个插件忽略掉。
而当我们要使用中文语言包的话：
可以自行在js文件中使用：
import ‘moment/locale/zh-cn’
moment.locale('zh-cn');
3：ddlPlugin（动态链接库）
DllPlugin
这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。 这个插件会生成一个名为 manifest.json 的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。
context (optional): manifest 文件中请求的上下文(context)(默认值为 webpack 的上下文(context))
name: 暴露出的 DLL 的函数名 (TemplatePaths: [hash] & [name] )
path: manifest json 文件的绝对路径 (输出文件)
new webpack.DllPlugin(options)
在给定的 path 路径下创建一个名为 manifest.json 的文件。 这个文件包含了从 require 和 import 的request到模块 id 的映射。 DLLReferencePlugin 也会用到这个文件。
这个插件与 output.library 的选项相结合可以暴露出 (也叫做放入全局域) dll 函数。
new webpack.DllPlugin({
context: __dirname,
name: "[name]_[hash]",
path: path.join(__dirname, "manifest.json"),
})
4:HappyPack(多线程打包)
在整个 Webpack 构建流程中，最耗时的流程可能就是 Loader 对文件的转换操作了，因为要转换的文件数据巨多，而且这些转换操作都只能一个个挨着处理。（运行在 Node.js 之上的 Webpack 是单线程模型的）
HappyPack的核心原理就是把这部分任务分解到多个进程去并行处理，从而减少了总的构建时间。
使用happypack:yarn add happypack
使用happypack：
以js为演示样例：
module: {
noParse: /jquery/,
rules: [{
test: /\.js$/,
use: "Happypack/loader?id=js"
}]
},
new Happypack({
id: "js",
use: [{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}]
}),
5:webpack自带优化
- tree shaking
现在我们有两个文件，一个js工具类文件，另外一个js文件需要引入这个js工具类文件导出的函数等。
utils.js
let sum = (a,b) => {
return a + b + 'sum';
}
let minus = (a,b) => {
return a - b + 'minus';
}
export default {
sum, minus
}
index.js
import calc from './index'
console.log(calc.sum(2,3))
加入我的index.js文件中只需要使用 utils.js导出的sum方法。
但是会出现我们不想要的。
即：
import 在生产环境下 会自动去掉没用的代码，但是在开发环境下，sum，minus两个函数都会被打包到bundle.js中。
这种webpack自带优化方式就叫做（tree shaking）
而require语法不支持 tree shaking。
- scope hosting (作用域提升)
先看一段这样的代码：
let a = 1;
let b = 2;
let c = 3;
let d = 4;
console.log(a + b + c + d,'--------');
在经过webpack打包后，在新的js文件中查看，可以看到webpack帮我们打包成了如下的代码。（避免了当前不需要的简单计算）。
6:webpack多页面抽取公共代码（这个跳过了。）
7:webpack懒加载功能
需要我们使用一个动态导入的插件：@babel/plugin-syntax-dynamic-import
test.js
export default {
name:'kangjiahao',
age:20
};
index.js
let button = document.createElement('button');
button.innerHTML = 'hello'
button.addEventListener('click',function(){
import('./test.js').then(data => {
alert(data)
})
})
document.body.appendChild(button);
我们在index.js中创建了button，让button在点击的时候能去加载test.js，然后将test.js中的代码弹出来。
new Happypack({
id: "js",
use: [{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
},
plugins:[
'@babel/plugin-syntax-dynamic-import'
]
}]
}),
结果：
vue的懒加载，和react的路由懒加载都是这样实现的。
实际上就是webpack在打包的时候生成了一个1.js然后被引用到了bundle.js中。
就简单在实习前学习一下webpack，差不多就后续在更新吧。
我喜欢一个人。