webpack——打包分析,preloading,prefetching(十四)

1.打包分析
打包分析参考链接: https://github.com/webpack/analyse
使用下面命令先打包生成一个stats.json文件:

webpack --profile --json > stats.json

对于package.json做如下修改:

"scripts": {
    "dev-build": "webpack --profile --json > stats.json --config ./build/webpack.dev.js"
  },

运行npm run dev-build,将生成stats.json文件。
点击链接: http://webpack.github.io/analyse/ , 选择stats.json文件:

分析结果:

src/index.js

document.addEventListener('click', () => {
    const ele = document.createElement('div')
    ele.innerHTML = "yang yang"
    document.body.appendChild(ele)
})

运行npm run dev-build,页面打印出yang yang
然而运行时这里报出警告, 是之前的代码的遗漏,这里做一下修正:

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

修正:
webpack.common.js
添加"corejs": "2",

options: {
                    "presets": [
                        [
                        //es6=>es5
                        "@babel/preset-env", {
                            "targets": {
                                // "edge": "17",
                                // "firefox": "60",
                                // "chrome": "67",
                                "safari": "11.1",  //以上版本已经支持es6,不需要再做es6=>es5
                            },
                            "corejs": "2",  //declaring corejs
                            useBuiltIns: 'usage'  
                        }
                        ],
                        "@babel/preset-react", //转化react代码
                    ], 
                }

index.js文件的click事件中的代码还未点击之前没有任何用处, 却让页面一加载就要把它下载下来,实际上浪费了页面执行的性能,应该把它放到异步加载的模块当中去。

在src目录下新建一个click.js文件:
src/click.js

function handleClick() {
    const ele = document.createElement('div')
    ele.innerHTML = 'yueyue'
    document.body.appendChild(ele)
}
export default handleClick

src.index.js

document.addEventListener('click', () => {
    import('./click.js').then(({default: func}) => {
        func()
    }) 
})

运行npm run dev-build, 会发现代码利用率比之前提高。

2.webpackPrefetch
不需要点击就可以预先加载click.js文件,主js文件加载完成,网络带宽有空闲就预先加载click.js。
3.webpackLoad
此外还有webpackLoad , 它是和主js文件一起加载的。
src.index.js

document.addEventListener('click', () => {
    import(/* webpackPrefetch: true */ './click.js').then(({default: func}) => {
        func()
    }) 
})

运行npm run dev-build

总结:
提升代码性能应该考虑的:
不再是考虑缓存,而是应该考虑如何让页面加载js文件它的代码利用率最高。