工作记录 ：
针对首屏加载慢使用打包分析工具查看了一下：
拆包
chunk-vendors.js 包 13M 有点大考虑 将他拆成多个包 步骤如下：
配置 splitChunks
config.optimization.splitChunks({
chunks: 'all',
minChunks: 2,
name: true,
cacheGroups: {
vendors: {
test: /[\/]node_modules[\/]/,
priority: -10
},
default: {
priority: -20,
reuseExistingChunk: true
}
}
})
启动项目
加载方式
1 了解 加载方式如下：
javascript 标签属性
defer： 如果script标签 设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染。如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script.defer脚本会在文档渲染完毕后 DOMContentLoaded事件调用前执行。
async： async 浏览器立即异步下载文件，不同于defer得是，下载完成会立即执行，此时会阻塞dom渲染，所以async的script最好不要操作dom。因为是下载完立即执行，不能保证多个加载时的先后顺序。
preload和prefecth是link标签上的属性
preload：让浏览器提前加载指定资源(加载后并不执行)，需要执行时再执行
prefetch：它告诉浏览器，这段资源将会在未来某个导航或者功能要用到，但是本资源的下载顺序权重比较低。也就是说prefetch通常用于加速下一次导航，而不是本次的。被标记为prefetch的资源，将会被浏览器在空闲时间加载。
参考原文链接：blog.csdn.net/qq_38211541…
2 webpack 配置
script-ext-html-webpack-plugin
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
config.plugins.push(
new ScriptExtHtmlWebpackPlugin({
sync: /(app|vendor|antd|utils).?(.*)?.js$/,
defaultAttribute: 'defer'
})
)
如果需要设置 preload 在 chainWebpack 中添加配置
config.plugin('preload').tap(options => {
options[0].fileBlacklist.push(/(app|vendor).?(.*)?.js$/)
return options
})
