lazy loading · 前端

webpack.config.js ``` const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // 单入口 entry: './src/js/index.js', output: { filename: 'js/[name].[contenthash:10].js', path: resolve(__dirname, 'build') }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', minify: { collapseWhitespace: true, removeComments: true } }) ], optimization: { splitChunks: { chunks: 'all' } }, mode: 'production' }; ``` src/index.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack</title> </head> <body> <h1>hello lazy loading</h1> <button id="btn">按钮</button> </body> </html> ``` src/js/index.js ``` console.log('index.js文件被加载了~'); // import { mul } from './test'; document.getElementById('btn').onclick = function() { // 懒加载~：当文件需要使用时才加载~ // 预加载 prefetch：会在使用之前，提前加载js文件 // 正常加载可以认为是并行加载（同一时间加载多个文件） // 预加载 prefetch：等其他资源加载完毕，浏览器空闲了，再偷偷加载资源 import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ mul }) => { console.log(mul(4, 5)); }); }; ``` src/js/print.js ``` console.log('test.js文件被加载了~'); export function mul(x, y) { return x * y; } export function count(x, y) { return x - y; } ```