webpack优化项目

在使用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 as attribute depends on the type of each file. For each file ends with .css, the plugin will preload it with as=style, for each file ends with .woff2, the plugin will preload it with as=font, while for all other files, as=script 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 中 我使用的是

@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 后面