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; } ```