做网站内容图片多大,用jsp sqlserver做的购物网站,万网制作网站怎么样,室内装饰设计专业首先上结果#xff1a;把常用的 Vue#xff0c;router#xff0c;vuex#xff0c;axios 的 runtime 包拆分了出来#xff0c;改为 cdn#xff1b;另外就是对于自己编写的业务代码进行分包#xff0c;根据路由进行懒加载#xff0c;可以较好的提高首屏加载速度。添加了全…首先上结果把常用的 Vueroutervuexaxios 的 runtime 包拆分了出来改为 cdn另外就是对于自己编写的业务代码进行分包根据路由进行懒加载可以较好的提高首屏加载速度。添加了全局 loading 来提高体验。优化前可以看出包含了不少的runtime包经过优化体积大幅减小不出意外core-js也可以改成CDN配合静态资源的CDN加速目前首页的速度大概是700ms除了图片外加载的速度大概是200ms左右abandon.workabandon.workCDN 优化CDN 优化是在 webpack 中实现的主要分为环境切换webpack 打包技巧和 html-webpack-plugin配置三个部分。这部分的代码可以点击这个链接环境切换通过process.env.NODE_ENV来切换环境因为在 dev 环境的时候最好还是使用本地包方便 debug 等在生产环境的时候才需要添加 CDN.本项目的vue.config.js中就是这样安排的这样就可以在不同环境对 webpack 进行配置类似于vue-cli2的配置类型# cli 2
webpack.dev.js
webpack.prod.js本项目中;if (process.env.NODE_ENV production) {webpackConfig[chainWebpack] config {config.plugin(html).tap(args {args[0].cdn cdn;return args;});};webpackConfig[configureWebpack] config {config[externals] {vue: Vue,vuex: Vuex,vue-router: VueRouter,axios: axios,};config[plugins].push(new BundleAnalyzerPlugin());};
}module.exports webpackConfig;
具体操作涉及vue/cli3的配置具体可以看这里;对于configureWebpack 有配置式和函数式当使用函数式的时候添加插件的方法可以看上面的片段这是官方文档里面没有的。打包技巧那么该怎么设置 cdn 呢这里需要两个 webpack 的配置项webpack.externalswebpack.plugins.html-webpack-plugin具体也可以看代码主要的思路就是在区分环境的基础上在生产环境将需要 cdn 的包放在webpack.externals里面webpackConfig[configureWebpack] config {config[externals] {vue: Vue,vuex: Vuex,vue-router: VueRouter,axios: axios,};
};
接着就是操作 plugin这里选择链式操作将需要填入的 cdn 连接的内容传给index.html模板let cdn {js: [// 可以写成动态版本号//cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js,//cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js,//cdn.bootcss.com/vuex/3.1.2/vuex.min.js,//cdn.bootcss.com/axios/0.19.0/axios.min.js,],
};
webpackConfig[chainWebpack] config {config.plugin(html).tap(args {args[0].cdn cdn;return args;});
};
html-plugin 配置上述的配置完成之后需要在public/inedx.html中修改一下div idapp/div
% if(process.env.NODE_ENVproduction){htmlWebpackPlugin.options.cdn.js.forEach(function(item){ if(item){ %
script typetext/javascript src% item %/script
% }})} %
!-- built files will be auto injected --这个的目的就是当是生产环境的时候遍历生成 CDN 的元素。这是一个模板语法可以看看html-webpack-plugin参考文章webpack 使用 HtmlWebpackPlugin 进行 cdn 配置vue 打包优化在 vue-cli 3.0 中根据不同环境动态注入 CDNwebpack-cdn-pluginwebpack4 配置的最佳实践路由懒加载优化这里主要是根据官方文档的实践结合 Vue 的异步组件和 Webpack 的代码分割功能轻松实现路由组件的懒加载。// src/router/index.js
// 路由懒加载 博客分块
const Blog () import(/* webpackChunkName: group-blog */ ../views/Blog/Blog.vue);
const ContentPage () import(/* webpackChunkName: group-blog */ ../views/Blog/ContentPage.vue);
loading 插件为了美化加载的过程自定义一个Loading插件主要参考了这些文章选择了一个蛮炫酷的动效功能单例模式可以在axios拦截器中使用写在最后希望大家可以多多关注我的abandon.work一个nest.jsmongoDBVue.js的小站。
