翻译webpack3.5.5 - code splitting - 上半部分
gloria0 2019-06-21
对于大型web app来说，如果把所有的文件都打包到一个文件中是非常低效的，特别是当一些代码块只在某些特定的条件下被调用。webpack可以让你的代码库分割成不同的块(chucks),仅仅在需要的时候再加载。其他的一些打包工具叫它们图层（layers), 卷(rollups) 或者 片段（fragments),这些特性被叫做代码分离（code splitting)。
这是一个可选的属性。你可以在你的代码库中定义分割点。webpack能帮你管理好依赖，输出文件和运行时。
澄清一个共同的误解：代码分离(code splitting)不仅仅是抽出公共代码把它们放进一个共享的块（chuck)中。更重要的特性是代码分离（code splitting)可以将代码分割成按需加载的块。这可以使项目初始化的时候只需要加载很少的代码，当应用请求的时候再按需加载代码。
有三种常用的代码分离方法:
- 入口起点: 使用entry选项手动分离代码
- 防止重复: 使用 CommonsChuckPlugin 来去重和分离代码
- 动态导入: 在模块内部通过内联函数来调用代码
入口
这是迄今为止最简单,最直观的拆分代码的方式。但是它是比较偏向手动并且有一些陷阱需要我们去注意的。看一看我们是怎么样从主buddle中分割其他模块的。
project
webpack-demo |- package.json |- webpack.config.js |- /dist |- /src |- index.js + |- another-module.js |- /node_modules
another-module.js
import _ from 'lodash'; console.log( _.join(['Another', 'module', 'loaded!'], ' ') );
webpack.config.js
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js',
another: './src/another-module.js'
},
plugins: [
new HTMLWebpackPlugin({
title: 'Code Splitting'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};这将会产生下面的build结果：
Hash: 309402710a14167f42a8
Version: webpack 2.6.1
Time: 570ms
Asset Size Chunks Chunk Names
index.bundle.js 544 kB 0 [emitted] [big] index
another.bundle.js 544 kB 1 [emitted] [big] another
[0] ./~/lodash/lodash.js 540 kB {0} {1} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} {1} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} {1} [built]
[3] ./src/another-module.js 87 bytes {1} [built]
[4] ./src/index.js 216 bytes {0} [built]还记得我们提到的那些陷阱嘛？
- 如果入口文件中有任何重复的模块，它们都会被包含在这些入口文件中。
- 它是不灵活的并且不能用内在的应用逻辑来动态分割代码。
这两点中的第一点绝对是我们例子的中的问题。像lodash也在./src/index.js中被导入，所以它会在两个bundle中重复。让我们来使用CommonsChunkPlugin来移除这个重复的部分。
阻止重复
CommonsChunkPlugin插件允许我们抽出共同的依赖放在一个存在的入口chunk或者一个存在的new chunk里。让我们使用这个插件去除上一个例子中重复的lodash依赖。
const path = require('path');
+ const webpack = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js',
another: './src/another-module.js'
},
plugins: [
new HTMLWebpackPlugin({
title: 'Code Splitting'
+ })
+ }),
+ new webpack.optimize.CommonsChunkPlugin({
+ name: 'common' // Specify the common bundle's name.
+ })
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};在这里使用commonsChunkPlugin，我们将会看到重读的依赖会从我们的index.bundle.js文件中移除。插件将会注意到我们已经将loadash分割成一个单独的块。并且从我们的主bundle中删除了这部分。让我们运行npm run bulid来看看它是否起作用了。
Hash: 70a59f8d46ff12575481
Version: webpack 2.6.1
Time: 510ms
Asset Size Chunks Chunk Names
index.bundle.js 665 bytes 0 [emitted] index
another.bundle.js 537 bytes 1 [emitted] another
common.bundle.js 547 kB 2 [emitted] [big] common
[0] ./~/lodash/lodash.js 540 kB {2} [built]
[1] (webpack)/buildin/global.js 509 bytes {2} [built]
[2] (webpack)/buildin/module.js 517 bytes {2} [built]
[3] ./src/another-module.js 87 bytes {1} [built]
[4] ./src/index.js 216 bytes {0} [built]这里有一些社区提供的分割代码的插件和加载器:
- ExtractTextPlugin: 用来从主程序中分割出css
- bundle-loader: 用来分离代码并且懒加载结果bundles
- Promise-loader: 和bundle-loader作用相同，但是它是使用promise
CommonsChunkPlugin使用explicit vendor chunks从核心应用代码中来分离vendor模块
动态导入
当涉及到动态分割的时候，有两种相似的技术被支持。第一个并且也是更完满的方法是使用遵循ECMAScript规范的import语法来进行动态导入。更老的一种是，webpack特殊的方法require.ensure。让我们来试一试使用第一种方法。
import调用使用promise，如果你想在不支持promise的老旧浏览器上使用，请引入一个promise polyfill。
在我们开始之前，让我们移除这个多余的entry和commonsChunkPlugin 从我们的配置文件中。因为它们在接下来的教学中已经不再需要了。
webpack.config.js
const path = require('path');
- const webpack = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
+ index: './src/index.js'
- index: './src/index.js',
- another: './src/another-module.js'
},
plugins: [
new HTMLWebpackPlugin({
title: 'Code Splitting'
- }),
+ })
- new webpack.optimize.CommonsChunkPlugin({
- name: 'common' // Specify the common bundle's name.
- })
],
output: {
filename: '[name].bundle.js',
+ chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}; 