懒加载

如模块异步加载，可以让页面更快的显示，不需要的部分一开始不加载等

Promise.all([import('echarts'), import('jquery')]).then(libs => {
  var echarts = libs[0];
  var $ = libs[1];
});

const main = document.querySelector('main');
import(`./section-modules/${someVariable}.js`)
.then(module => {
module.loadPageInto(main);
})
.catch(err => {
main.textContent = err.message;
});

这种语法需要配置好babel的相关插件才能正确被识别

打包分析

https://github.com/webpack/analyse 在package.json中配置

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

cnpm run start 

生成一个stats.json,可以使用(http://webpack.github.com/analyse)进行分析(可能需要翻墙)

coverage 检测代码使用率

打开控制台--》点击‘Sources’--》ctrl+shift+p--》在命令窗口输入coverage--》在下边新出现的窗口中点击左上角刷新按钮。

首屏加载快，而不是二次看页面缓存，那么就需要提高代码利用率，把不需要立刻使用的代码分割出去，在需要的时候通过import()动态引入进来

预加载

webpackPrefetch/webpackPreLoad

• webpackPrefetch(等页面内容加载完之后默默加载)
• webpackPreLoad(并行加载)

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

浏览器有兼容性问题