前言
在前端开发中，我们经常使用 webpack 进行打包。但是随着项目的不断增大，我们会发现打包时间越来越长，打包后的代码越来越大，这会影响我们的开发效率和网页加载速度。本文将介绍一些优化 webpack 打包 js 代码的方法，帮助我们提高打包速度和减小打包后的文件大小。
优化方法
1. 使用 Tree Shaking
Tree Shaking 是指通过静态分析，将未使用的代码从打包后的文件中删除，从而减小文件大小。在 webpack 中，我们可以使用 UglifyJSPlugin 插件来进行 Tree Shaking。
-- -------------------- ---- -------
----- -------------- - -----------------------------------
-------------- - -
-- ---
------------- -
---------- -
--- ----------------
---------- -----
-------------- -
--------- -
------- ----
-
-
--
-
-
--2. 使用 Scope Hoisting
Scope Hoisting 是指将模块之间的依赖关系进行静态分析，尽可能地把模块中的代码合并到一个函数中，从而减小函数声明语句的数量，使代码体积更小、运行更快。在 webpack 3 中，我们可以通过设置 moduleConcatenation 来开启 Scope Hoisting。
module.exports = {
// ...
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
};3. 使用 DllPlugin 和 DllReferencePlugin
DllPlugin 和 DllReferencePlugin 是指将一些不经常变化的库文件提前打包成一个单独的文件，从而减小每次打包的时间。我们可以通过以下步骤来实现：
在 webpack.config.js 中配置 DllPlugin 插件：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- -------------- - - -- --- -------- - --- ------------------- ----- --------- ----- -------------------- ------ -------------- -- - --在一个新的 webpack.config.dll.js 中配置需要提前打包的库文件：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------- - ------------------- -------------- - - ------ - ------- --------- ------------ -- ------- - ----- -------------------- ------- --------- ---------------- -------- -------- -- -------- - --- ------------------- ----- --------- ----- -------------------- ------ -------------- -- - --在 webpack.config.js 中使用 DllReferencePlugin 引用提前打包的库文件：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------- - ------------------- -------------- - - -- --- -------- - --- ---------------------------- -------- ---------- --------- -------------------- ------ -------------- -- - --
4. 使用 HappyPack
HappyPack 是一个多线程打包工具，它可以将一些耗时的任务分解到多个子进程中去执行，从而加快打包速度。我们可以按照以下步骤来使用 HappyPack：
安装 HappyPack：
npm install happypack --save-dev
在 webpack.config.js 中配置 HappyPack：
-- -------------------- ---- ------- ----- --------- - --------------------- ----- -- - -------------- ----- --------------- - ---------------------- ----- ---------------- --- -------------- - - -- --- ------- - ------ - - ----- -------- -------- --------------- ---- -------------------------- - - -- -------- - --- ----------- --- ----- ----------- ---------------- -------- ---------------- -- - --
5. 使用 Code Splitting
Code Splitting 是指将代码分割成多个小块，从而减小每个小块的大小，提高加载速度。在 webpack 中，我们可以使用以下两种方式来实现 Code Splitting：
动态导入：
import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => { console.log(_.join(['Hello', 'webpack'], ' ')); });配置 optimization.splitChunks：
module.exports = { // ... optimization: { splitChunks: { chunks: 'all' } } };
总结
通过使用上述优化方法，我们可以显著提高 webpack 打包 js 代码的速度和减小打包后的文件大小。在实际开发中，我们可以根据项目的具体情况选择合适的优化方法来进行优化，从而提高开发效率和网页加载速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658ca23eeb4cecbf2d252827