一.路由懒加载
1.代码示例
2.路由懒加载的好处
减少了文件的体积,打开网页的速度变得更快, 不点击就不会触发。
二.解决在 production 上线的时候的打印问题。
// 项目在发布时需要用到的 babel 插件数组
const proPlugins = [];
console.log(process.env.NODE_ENV, "获取当前的开发环境"); // develoment:本地 production:生产===上线
// 如果当前是测试环境或者是生产环境,则使用去掉 console 的插件
if (process.env.NODE_ENV === "production") {
// 表示当前是上线状态===去除console打印
proPlugins.push("transform-remove-console");
}
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk",
},
],
...proPlugins,
//process.env.NODE_ENV === "production" ? "transform-remove-console" : "",
],
};
解析:在我们项目上线的时候有些时候存在打印,可以使用改配置对其进行更改,在babel.config.js的文件。
三.解决白屏的问题cdn包进行优化
1.在vue.config.js
// 覆盖默认的webpack配置
console.log(11111);
/*
1、先确定开发环境
2、上线环境==有些包不需要打包直接使用线上的cdn
3、配置他
*/
var env = process.env.NODE_ENV;
let externals = {};
if (env === "production") {
// externals对象中的文件表示:上线的时候不需要打包node_modulesh中的js文件,就使用cdn
externals = {
// import 时的包名称: window 全局的成员名称
// 属性名:包的名字 属性值:导入包的对象名字
vue: "Vue",
"vue-router": "VueRouter",
vuex: "Vuex",
axios: "axios",
dayjs: "dayjs",
echarts: "echarts",
"element-ui": "ELEMENT",
"vue-quill-editor": "VueQuillEditor",
};
}
module.exports = {
publicPath: "./", // 解决白屏问题
devServer: {
port: 7777, // 自定义端口号
open: true, // npm run serve 自动打开浏览器
},
configureWebpack: {
// 打包优化
externals:externals
},
};
解析:externals对象中的文件表示:上线的时候不需要打包node_modulesh中的js文件,就使用cdn,在configureWebpack初始化包。
2.在public/html,完成cdn的引入
3.引入cdn的好处
为了减少编译后的体积,提高页面渲染速度,我们可以通过引入 CDN 链接把库分离,多线程异步 js 库,从而达到加速渲染的目的。