前面我们讲解了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，差不多就后续在更新吧。
我喜欢一个人。
