webpack优化环境配置 - 24.lazy loading

2022-09-08 18:30:17 阅读：201 来源： 互联网

标签：24 index lazy loading 浏览器 js webpack true 加载

//懒加载: 当文件需要时才加载~
//预加载: prefetch: 会在使用之前，提前加载js文件 (webpackPrefetch: true)

//正常加载可以认为是并行加载(同一时间加载多个文件)。
// 预加载: prefetch: 等其他资源加载完毕，浏览器空闲了，再偷偷加载资源。(但是兼容性差，只能在PC端一些高版本浏览器使用，在移动端，或者IE浏览器中有相当大的兼容问题)

1.文件结构

2.代码

index.js

console.log('index.js文件被加载了~')

import {mul} from './test'

document.getElementById("btn").onclick = function () {
    //懒加载: 当文件需要时才加载~
    //预加载: prefetch: 会在使用之前，提前加载js文件 (webpackPrefetch: true)

    //正常加载可以认为是并行加载(同一时间加载多个文件)。
    // 预加载: prefetch: 等其他资源加载完毕，浏览器空闲了，再偷偷加载资源。(但是兼容性差，只能在PC端一些高版本浏览器使用，在移动端，或者IE浏览器中有相当大的兼容问题)
    import(/*webpackChunkName: 'test', webpackPrefetch: true */'./test')
        .then(({mul}) => {
            console.log(mul(4, 5));
        })
        .catch((err) => {
            console.log('err...:', err)
        })
}

test.js

console.log('test.js文件被加载了~')
export function mul(x, y) {
    return x * y;
}

export function count(x, y) {
    return x - y;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
</head>
<body>
    <h5>hello lazy loading</h5>
    <button id="btn">BTN</button>
</body>
</html>

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'
}

3.打包

$ webpack

end~

标签：24,index,lazy,loading,浏览器,js,webpack,true,加载
来源： https://www.cnblogs.com/sener/p/16670482.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack优化环境配置 - 24.lazy loading