在使用vue 构建项目的时候 ，会用到vue.js, vue-router.js, 等库，通常打包的话会将这些公用的代码打包的一个文件中，导致该文件过大影响加载的速度。那么可以考虑使用cdn 加速的方式将
在使用vue 构建项目的时候 ，会用到vue.js, vue-router.js, 等库，通常打包的话会将这些公用的代码打包的一个文件中，导致该文件过大影响加载的速度。那么可以考虑使用cdn 加速的方式将这些文件单独加载，在webpack4 中，配置比如
externals : { ‘vue‘: ‘Vue‘ }, 可以将该文件排除在打包文件之外。 在单页面应用中 可以通过<link rel="preload" as="script" href="home.31132ae6680e598f8879.js">
设置 ref 为 preload或者 prefeach
When preloading files, the plugin will use different attribute depends on the type of each file. For each file ends with , the plugin will preload it with , for each file ends with , the plugin will preload it with , while for all other files, will be used.
This module requires Webpack 2.2.0 and above. It also requires that you‘re using html-webpack-plugin in your Webpack project. 使用的时候必须和 html-webpack-plugin插件
一块使用，在webpack4 中 我使用的是as.cssas=style.woff2as=fontas=script
@vue/preload-webpack-plugin 插件，参考的是 vue-cli3 中的依赖 使用preload-webpack-plugin应为版本的问题 打包的时候会报错。使用例子
new PreloadWebpackPlugin({
rel: ‘prefetch‘,
includeHtmlNames: [‘index.html‘],
include: ‘asyncChunks‘ // or ‘initial‘
}),
new PreloadWebpackPlugin({
rel: ‘preload‘,
includeHtmlNames: [‘index.html‘],
include: {
type: ‘initial‘,
entries: [‘app‘,‘common‘]
},
}),
new PreloadWebpackPlugin({
rel: ‘prefetch‘,
includeHtmlNames: [‘work.html‘],
include: ‘asyncChunks‘ // or ‘initial‘
}),
new PreloadWebpackPlugin({
rel: ‘preload‘,
includeHtmlNames: [‘work.html‘],
include: {
type: ‘initial‘,
entries: [‘work‘,‘common‘]
},
}),
一定要放在 html-webpack-plugin 后面