从零开始的 Webpack4.0 打包速度优化（篇二）
在前一篇文章中，我们已经初步了解了 Webpack 的打包机制，并通过一些简单的配置优化了打包速度。然而，如果项目变得更加庞大，那么我们需要做更多的优化才能保持整体的性能。在本篇文章中，我们将会更深入地探讨 Webpack 打包速度优化的相关技术。
- 分项打包
在打包过程中，包含大量代码的模块将会严重拖慢整体速度。因此，我们需要对代码进行分项打包。
在实际操作过程中，我们可以使用 Webpack 的两种主要方法进行分项打包：
1.1 多入口文件
如果你的项目中包含多个页面（如多个页面应用程序），那么使用多入口文件是一种简单有效的分项打包方法。
举个例子，在下面的配置中，我们将在每个入口文件中添加我们所需要的依赖：
// www.javascriptcn.com code example
module.exports = {
entry: {
home: './src/home.js',
about: './src/about.js',
contact: './src/contact.js'
},
output: {
filename: '[name].bundle.js',
path: __dirname + '/dist'
}
}在这个配置中，我们为每个入口指定了一个独立的名称（home、about 和 contact）。Webpack 将会根据这些入口文件生成相应的文件（home.bundle.js、about.bundle.js、contact.bundle.js），以此作为我们代码的分项打包。
1.2 动态导入
Webpack 还提供了一种异步加载代码的方法，叫做动态导入。使用动态导入可以让 Webpack 仅加载需要使用的模块，而不是加载整个配置。
举个例子，在下面的配置中，我们可以使用 import () 函数在运行时异步加载代码：
// www.javascriptcn.com code example
function getComponent() {
return import('lodash').then(_ => {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}).catch(error => 'An error occurred while loading the component');
}
getComponent().then(component => {
document.body.appendChild(component);
});在这个例子中，我们用到了 import () 函数，并在异步加载 lodash 库时将其作为 Promise 返回。我们可以在加载完成后的 then 回调函数中操作该库的代码。这种方式可以让我们更加灵活地分项打包，只加载我们需要的依赖项。
- 自定义 loader
Webpack 打包时需要使用一些 loader 将非 JavaScript 代码处理成 JavaScript 代码，这也是我们优化速度的重点之一。因此，我们需要对 loader 进行调优。
除了使用现有的 loader 外，Webpack 还可以让我们自定义 loader，来更好地适应我们的项目需求。
举个例子，在下面的代码中，我们创建了一个自定义 loader，并对 less 文件进行编译：
module.exports = function(source) {
if (/\bless\b/.test(source)) {
var css = require('less').renderSync(source).css;
return css;
}
return source;
};在这个例子中，我们首先检查源代码中是否存在 less 字段，如果存在，我们会使用 Less 模块将其进行编译。
- 更好的缓存
为了提高重新构建时的速度，我们需要让 Webpack 实现更好的缓存。
3.1 HardSourceWebpackPlugin
为了实现更好的缓存，我们可以使用 HardSourceWebpackPlugin 插件来缓存构建结果。这个插件可以有效地提高重新构建的速度。在下面的代码中，我们可以看到如何使用这个插件：
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
// ...
plugins: [
new HardSourceWebpackPlugin()
]
};3.2 使用 cache-loader
另外，我们还可以使用 cache-loader 插件来将依赖缓存到磁盘上，以便于未来重新构建时使用。在下面的例子中，我们可以看到如何使用这个插件：
// www.javascriptcn.com code example
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'cache-loader',
options: {
cacheDirectory: path.resolve('.cache-cache-loader')
}
},
'babel-loader'
]
}
]
}
};在这个例子中，我们添加了一个 cache-loader，在 babel-loader 前使用。这样可以让 cache-loader 将已经解析的文件内容保存到磁盘上，提高未来重新构建的速度。
综上所述，以上就是关于 Webpack4.0 打包速度优化的详细介绍。我们可以通过分项打包、自定义 loader 和更好的缓存等方式来提高整体性能。当然，这些方法只是 Webpack 优化的冰山一角，我们需要不断探索和学习，才能让我们的项目更加稳定和优异。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d00085e46428fe9ec70938