实现高性能应用其中最重要的一点就是尽可能地让用户每次只加载必要的资源,优先级不要太高的资源则采用延迟加载等技术渐进式地获取,这样可以保证页面的首屏速度。代码分片是webpck打包工具所特有的一项技术,通过这项功能可以把代码按照特定的形式进行拆分,使用户不必一次全部加载,而是按需加载。 虽然这个插件在webpack4当中已经不推荐使用,但是我们还是要了解一下。这个插件可以将多个Chunk中的公共的部分提取出来。公共模块提取可以为几个项目带来几个收益: 该插件的默认规则是只要一个模块被两个入口chunk所使用就会被提取出来,比如只要a和b用了react,react就会被提取出来。但是它仍有些不足之处: 这是webpack新增的一个功能,改进了CommonChunkPlugin而重新设计和实现的代码分片特性,不仅比CommonChunkPlugin功能更加强大,还更简单易用。代码如下 splitChunk默认情形下的提取条件: 匹配模式 chunks的值有三个,async(默认)、initial、all。async只提取异步chunks,initial只对入口chunk生效,all两种模式同时开启(推荐使用) 匹配条件 minSize、minChunks、maxAsyncRequests、maxInitialRequests 命名 默认为true,它意味着可以根据不能cacheGroups和作用范围自动为新生成的chunk命名,并以automaticNameDelimiter分隔。 cacheGroup 可以理解为分离chunks时 的规则,默认情况下两种规则:vendors和default。vendors 用于提取所有node_modules中符合条件的模块,default则作用于被多次引用的模块。可以对这些规则进行增加或者修改,如果要禁用某种规则,也可以直接将其设置为false。当一个模块同时符合多个cacheGroups时,则更具其中的priority配置项确定优先级。 资源异步加载主要解决的问题是,当模块数量过多,资源体积过大时,可以把一些暂时使用不到的模块延迟加载。这样使页面初次渲染的时候用户下载的资源尽可能小,后续的模块等到需要的时候在再去触发加载,因此这种一般都叫做按需加载。 webpack中有两种异步加载的方式,import(webapck2开始)和require.ensure(webapck1),import和es6 module的区别就是,不需要顶层加载,即用即加载。因为只是简单的函数调用。CommonsChunkPlugin
splitChunks
module.exports = {
entry: './foo.js',
output: {
filename: 'foo.js',
publicPath: '/dist/'
},
mode: 'development',
optimization: {
splitChunks: {
chunks: 'all',
}
}
}
// foo.js
import React from 'react';
import('./bar.js');
document.write('foo.js', React.version);
// bar.js
import react from 'react';
console.log('bar.js', React.version);
splitChunk:{
chunks: 'async',
minSize: {
javascript: 30000,
style: 50000,
},
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups:{
vendor: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
异步加载资源