1、移除 preload 与 prefetch
vue 脚手架默认开启了 preload 与 prefetch，当我们项目很大时，这个就成了首屏加载的最大首恶了。先简单相识一下 preload 与 prefetch。
1、preload 与 prefetch 都是一种资源预加载机制；
2、preload 是预先加载资源，但并不实验，只有必要时才实验它；
3、prefetch 是意图预获取一些资源，以备下一个导航/页面使用；
4、preload 的优先级高于 prefetch。
vue.config.js的设置
chainWebpack: config => { // 移除 preload(预载) 插件 config.plugins.delete('preload') // 移除 prefetch(预取) 插件 config.plugins.delete('prefetch') }添加设置完成
2、使用 terser-webpack-plugin 扫除 console.log
开发过程中我们每每必要 console.log 举行调试，调试完后一样平常也会删除或表明掉，但不免偶然会忘记，以是可以使用 terser-webpack-plugin 来扫除 console.log。
起首必要下载依赖
npm install terser-webpack-plugin --save-dev
然后设置
chainWebpack: (config) => { config.optimization.minimizer('terser').tap((args) => { args[0].terserOptions.compress.drop_console = true return args })}3、使用 compression-webpack-plugin 开启 gzip 压缩
1、下载依赖
如果设置完成 有报错的话可以低落版本 默认的下载最新版本
npm install compression-webpack-plugin@6.1.1 -D
2、修改设置
configureWebpack: config=>{ config.resolve={ ...config.resolve, alias: { 'vue$': 'vue/dist/vue.esm.js', '@': path.resolve(__dirname, './src'), } }, config.externals= { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'element-ui': 'ELEMENT', } config.plugins = [ ...config.plugins, // 开启 gzip 压缩 new CompressionPlugin({ filename: '[path][base].gz', algorithm: 'gzip', test: /\.js$|\.css$|\.html$/, threshold: 10240, minRatio: 0.8 }) ] }压缩前：
压缩后
4、设置使用 CDN 方式引入资源库
有一些js的依赖我们可以不消打包到我们步伐中，可以使用cdn的方式来链接js的依赖文件。
1、起首先看设置：在vue.config.js中设置不打包的文件
configureWebpack: { externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'element-ui': 'ELEMENT', } }2、检察项目中文件依赖包的版本
3、在index.html中引入必要外联的资源
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/index.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js"></script>4、没有开启cdn设置之前文件
5、设置完cdn的文件
5、压缩图片
1、下载依赖
cnpm install image-webpack-loader --save-dev
2、设置设置
// webpack相干设置 chainWebpack: (config) => { config.optimization.minimizer('terser').tap((args) => { args[0].terserOptions.compress.drop_console = true return args }) //移除预载插件 config.plugins.delete('preload') //移除预取插件 config.plugins.delete('prefetch') //图片压缩 config.module .rule('images') .use('imageWebpackLoader') .loader('image-webpack-loader') .options({ disable: process.env.NODE_ENV === 'development', // 开发情况下克制压缩 gifsicle: { interlaced: false } }) }在线压缩图片 |
