vue里面的项目做优化

一.路由懒加载  

 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 库，从而达到加速渲染的目的。