zoukankan      html  css  js  c++  java
  • webpack实现code splitting,提升项目加载速度

    1、实现代码code splitting的好处

      1-1、在项目中项目代码大小为1m,引入的模块为1m,总共大小为2m,都打包在main.js,初次请求项目大小为2m,如果改了项目代码中的一部分,由于都在main.js中,再次刷新,还是请求2m,请求缓慢。

      1-2、使用code splitting后,项目代码跟引入模块代码打包成多个文件,项目大小为1m,引入模块为1m,初次请求为2m,如果改了项目中的代码,只会改变main.js中的代码,模块分割出的1m代码代码没有改变,刷新浏览器,1m的模块代码不用请求,从浏览器缓存中读取,只需要请求1m的项目代码,节省了项目的请求时间。

    2、使用不同入口实现代码的code splitting

    yarn add lodash
    1、src/lodash.js
    import _ from 'lodash'
    
    2、src/main.js
    console.log(_.join([1,2,3],'-'))
    
    3、webpack.config.js部分配置
    module.exports={
     entry: {
            lodash:'./src/lodash.js',
            main: './src/main.js'
        },
    }

    总结:可以看见项目中dist生成lodash.js和main.js两个文件,code splitting成功

    3、删除src/lodash.js及webpack.config.js中的lodash入口配置,使用webpack自带配置自动实现code splitting

    1、src/main.js
    //1.1、同步引入方式
    import _ from 'lodash'
    let data = _.join([1, 2, 3], '-')
    console.log(data)
    //1.2、异步引入方式
    function getComponent() {
        return import('lodash').then(({ default: _ }) => {
            let dom = document.createElement('div')
            dom.innerText = _.join([1, 2, 3], '_')
            return dom
        })
    }
    getComponent().then(element => {
        document.body.appendChild(element)
    })
    //1.3、es6异步引入方式
    async function getComponent() {
        let { default: _ } = await import(/*webpackChunkName:"lodash"*/'lodash');
        let div = document.createElement('div')
        div.innerHTML = _.join(['a', 'b', 'c'], "-")
        return div
    }
    document.addEventListener('click', () => {
        getComponent().then(element => {
            document.querySelector("#root").appendChild(element)
        })
    })
    2、webpack.cong.js 部分配置
    optimization: {
            splitChunks:{
                chunks:'all'
            }
     }
    

    总结:可以看见dist自动生成了lodash.js,code splitting 配置成功

  • 相关阅读:
    vue+antDesign 多个select下拉组件实现已选择项不可用(置灰)
    antd + vue 点击编辑文本切换成可编辑状态(附下拉框)
    antDesign的table组件设置行列样式
    jQuery 效果之显示隐藏
    jQuery 样式操作
    jQuery对象筛选选择器
    jQuery 和DOM对象互相转化方法
    JQuery-01-1
    常见网页特效
    WebApl-javescript-动画函数
  • 原文地址:https://www.cnblogs.com/uimeigui/p/13934144.html
Copyright © 2011-2022 走看看