懒加载或者按需加载，可以优化网页或应用。
webpack 懒加载学习
例子链接：懒加载/demo15/
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// const webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
+ chunkFilename: '[name].bundle.js'
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Output Management'
}),
]
}
filename：对应于entry里面生成出来的文件名
chunkFilename：chunkname就是未被列在entry中，异步加载模块时会用到这个。
新建 print.js
console.log('The print.js module has loaded! See the network tab in dev tools...');
export default () => {
console.log('Button Clicked: Here\'s "some text"!');
}
新建test.js
console.log('按需加载，厉害了')
export function test() {
console.log('test')
}
修改 index.js，
import _ from 'lodash';
function buttonCreat(element,text) {
var button = document.createElement('button');
var br = document.createElement('br');
button.innerHTML =text;
element.appendChild(br);
element.appendChild(button);
return button
// Note that because a network request is involved, some indication
// of loading would need to be shown in a production-level site/app.
}
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
let btn1 = buttonCreat(element,'Click me and look at the console!')
let btn2 = buttonCreat(element,'test.js 测试')
btn1.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
var print = module.default;
print();
});
btn2.onclick = e=>import(/* webpackChunkName: "test" */'./test').then(module=>{
var test = module.test
test()
})
return element;
}
document.body.appendChild(component());
这里关键代码
btn2.onclick = e=>import(/* webpackChunkName: "test" */'./test').then(module=>{
var test = module.test
test()
})
webpackChunkName的意思是定义一个打包后的名字，结合chunkFilename使用。webpack打包后为 print.bundle.js、 test.bundle.js
运行命令 npm run build,可以看到打包的文件
Built at: 08/14/2019 5:37:21 PM
Asset Size Chunks Chunk Names
app.bundle.js 72.2 KiB 0 [emitted] app
index.html 192 bytes [emitted]
print.bundle.js 250 bytes 1 [emitted] print
test.bundle.js 207 bytes 2 [emitted] test
此处也可以不用，
btn2.onclick = e=>import('./test').then(module=>{
var test = module.test
test()
})
那么打包后文件是1.bundle.js，2.bundle.js，这是 webpack 默认给的名字。
运行npm run build，可以看到不使用webpackChunkName后，生成 js 文件变为了1.bundle.js，2.bundle.js
Built at: 08/14/2019 5:35:29 PM
Asset Size Chunks Chunk Names
1.bundle.js 250 bytes 1 [emitted]
2.bundle.js 207 bytes 2 [emitted]
app.bundle.js 72.2 KiB 0 [emitted] app
index.html 192 bytes [emitted]
