打开没有进行webpack针对优化的网站 我们打开控制台 会发现一些事情
常见问题：
Vue js 大应用程序背后的一些常见原因 –
不明智地使用第三方库
忽略代码分割和惰性加载
对 API 请求的不必要的点击
未正确构建 JS 和 CSS 文件
下面一条条的解析
一、chunk-vendors.js很大 加载时长太久
chunk-vendors.js顾名思义，它是所有模块的捆绑包，这些模块不是自己的，而是来自其他方的。它们被称为第三方模块或 vendor 模块。这意味着(仅和)来自 /node_modules 的所有模块。此处 我们可以尽量去掉一些不使用/不必要存在的依赖包 在webpack中忽略一些不经常更改的依赖，使用cdn加载 例如以下
const webpack = require('webpack') const assetscdn = { externals: { vue: 'Vue', 'vue-router': 'VueRouter', vuex: 'Vuex', axios: 'axios', nprogress: 'NProgress', }, css: [ ], js: [ '//lib.baomitu.com/vue/3.0.0/vue.global.js', '//lib.baomitu.com/vue-router/4.0.0/vue-router.global.min.js', '//lib.baomitu.com/vuex/4.0.0/vuex.global.min.js', '//lib.baomitu.com/axios/0.21.1/axios.min.js', '//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js', ] } module.exports = { configureWebpack: config => { config.externals = assetsCDN.externals }, chainWebpack: (config) => { config.plugin('html').tap(args => { args[0].cdn = assetsCDN return args }) }, } <!DOCTYPE html> <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximu-scale=1.0,user-scalable=no"> <link rel="icon" href="<%= BASE_URL %>favicon.ico?1234567"> <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" /> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" /> <% } %> <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %> <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script> <% } %> <title>test</title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> </body> </html> 1.使用externals从输出包中排除依赖项 点击查看 webpack-externals文档
2.使用config.plugin(‘html’).tap 注入cdn链接 但是要在html文件做处理
3.例如moment库很大 我们可以使用IgnorePlugin 阻止函数生成模块import或调用require。
点击查看webpack-lgnorePlugin文档
const webpack = require('webpack') config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)) 二、app.js很大 加载时长太久
app.js文件太大 个人认为 最主要的原因是在于Vue-router并没有使用懒加载引入 而是一次性引入 导致路由文件全部打包在app.js内 导致文件过于庞大导致的首页加载过慢 我们可以使用路由懒加载的方式引入组件
点击查看vueRouter路由懒加载中文文档文档
import UserDetails from './views/UserDetails' const UserDetails = () => import('./views/UserDetails') const router = createRouter({ routes: [{ path: '/users/:id', component: UserDetails }], }) 三、对于本地静态图很大该怎么处理呢
对于一些小的icon 我们可以存在本地 对于一些大图 我们可以使用cdn 如果不经常更换建议设置缓存时间长点 下面的列举一些cdn的header头
1.Last-Modified
在浏览器第一次请求某一个URL时，服务器端的返回状态会是200，内容是你请求的资源，同时有一个Last-Modified的属性标记(HttpReponse Header)此文件在服务期端最后被修改的时间，格式类似这样：
Last-Modified:Tue, 24 Feb 2009 08:01:04 GMT 2.If-Modified-Since
客户端第二次请求此URL时，根据HTTP协议的规定，浏览器会向服务器传送If-Modified-Since报头(HttpRequest Header)，询问该时间之后文件是否有被修改过：
If-Modified-Since:Tue, 24 Feb 2009 08:01:04 GMT 如果服务器端的资源没有变化，则自动返回HTTP304（NotChanged.）状态码，内容为空，这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时，则重新发出资源，返回和第一次请求时类似。从而保证不向客户端重复发出资源，也保证当服务器有变化时，客户端能够得到最新的资源。
3.Expires
给出的日期/时间后，被响应认为是过时。如
Expires:Thu, 02 Apr 2009 05:14:08 GMT 需和Last-Modified结合使用。用于控制请求文件的有效时间，当请求数据在有效期内时客户端浏览器从缓存请求数据而不是服务器端.当缓存中数据失效或过期，才决定从服务器更新数据。
4.Cache-Control: max-age=秒 和 Expires
expires = 时间，HTTP 1.0 版本，缓存的载止时间，允许客户端在这个时间之前不去检查（发请求）
max-age = 秒，HTTP 1.1版本，资源在本地缓存多少秒
如果max-age和Expires同时存在，则被Cache-Control的max-age覆盖
四、打包后的文件还是太大 页面加载还是很慢
1.使用gzip压缩 （打包后 需要nginx做处理 记得喊你家的运维帮忙处理下）
yarn add compression-webpack-plugin -D const webpack = require('webpack') const CompressionWebpackPlugin = require('compression-webpack-plugin') const gzipExtensions = ['js', 'css'] module.exports = { configureWebpack: config => { config.plugins.push(new CompressionWebpackPlugin({ algorithm: 'gzip', test: new RegExp('\\.(' + gzipExtensions.join('|') + ')$'), threshold: 10240, minRatio: 0.8, deleteOriginalAssets: false })) }, } 2.公共模块打包（我打包后会更大 离谱 我没有使用）
module.exports = { configureWebpack: config => { config.optimization = { splitChunks: { cacheGroups: { vendor: { chunks: 'all', test: /node_modules/, name: 'vendor', minChunks: 1, maxInitialRequests: 5, minSize: 0, priority: 100 } } } } } 3.图片压缩 (压缩后 页面图片会使用base64加载 可不压缩)
chainWebpack: (config) => { const imagesRule = config.module.rule('images') imagesRule.uses.clear() imagesRule.use('file-loader') .loader('url-loader') .options({ limit: 10240, fallback: { loader: 'file-loader', options: { outputPath: `static${_d}/img` } } }) }, 4.去掉注释和移除console
config.plugins.push( new UglifyJsPlugin({ uglifyOptions: { output: { comments: false }, warnings: false, compress: { drop_console: true, drop_debugger: false, pure_funcs: ['console.log'] } } }) ) } 原文链接：https://blog.csdn.net/weixin_45815859/article/details/122416441?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934458816781432995996%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934458816781432995996&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-4-122416441-null-null.article_score_rank_blog&utm_term=%E8%87%AA%E5%BB%BAcdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/6637
