Vue 上线优化

项目优化--进度条添加

• 安装nprogress，ui界面依赖安装依赖，搜索nprogress进行安装即可

• 在main中导入进度条组件

  //导入进度条插件
  import NProgress from 'nprogress'
  //导入进度条样式
  import 'nprogress/nprogress.css'

• 利用NProgress.start()显示进度条

  NProgress.start()

• 利用NProgress.done()隐藏进度条

  NProgress.done()

  • 安装babel-plugin-transform-remove-console

  • 在plugins节点下新增"transform-remove-console"

    "plugins": [
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ],
        "transform-remove-console"
      ]

    • 利用process.env.NODE_ENV判断当前是发布是开发阶段

      var prodPlugins = []
      ​
      if(process.env.NODE_ENV == 'production'){
        prodPlugins.push('transform-remove-console')
      }

    • 利用展开运算符将数组里面的插件交给plugins

      "plugins": [
          [
            "component",
            {
              "libraryName": "element-ui",
              "styleLibraryName": "theme-chalk"
            }
          ],
          ...prodPlugins
        ]

      • 创建vue.config.js文件

      • js内部暴露出一个配置对象

        module.exports = {
          
        }

        • 利用chainWebpack配置不同环境设置不同的入口文件

          chainWebpack:config=>{
              // 当前环境为 发布阶段
              config.when(process.env.NODE_ENV == 'production',config=>{
                config.entry('app').clear().add('./src/main-prod.js')
              })
              // 当前环境为 开发阶段
              config.when(process.env.NODE_ENV == 'development',config=>{
                config.entry('app').clear().add('./src/main-dev.js')
              })
            }

          • 因为入口文件中通过import导入包的方式，最终都会打包到同一个js文件中，所以导致chunk-vendors文件体积过大

          • 既然这些文件都打包到同一个js文件里体积过大，所以忽略一些js文件不打包(只需要配置发布阶段即可)

            //使用externals设置排除项
            config.set('externals',{
              vue:'Vue',
              'vue-router':'VueRouter',
              axios:'axios',
              echarts:'echarts',
              nprogress:'NProgress',
              'vue-quill-editor':'VueQuillEditor'
            })

          • 虽然忽略了一些js文件，但是在入口文件中还有一些css文件体积也比较大，所以直接将引入的css删除

            import VueQuillEditor from 'vue-quill-editor'
            // 富文本编辑器
            import 'quill/dist/quill.core.css'
            import 'quill/dist/quill.snow.css'
            import 'quill/dist/quill.bubble.css'

          • 将上面css删除后不打包，最终的样式肯定会有问题，所以我们在public中index.html中引入cdn的资源文件

            <!-- nprogress 的样式表文件 -->
            <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css"/>
            <!-- 富文本编辑器 的样式表文件 -->
            <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
            <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
            <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />

          • 对应的js文件我们也忽略了没有打包，所以也是直接在public中index.html中引入cdn的资源

            <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
            <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
            <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
            <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
            <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
            <!-- 富文本编辑器的 js 文件 -->
            <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

            • 删除入口文件中的按需导入的elemen.js

            • 导入element的cdn资源

              <!-- element-ui 的样式表文件 -->
              <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />
              <!-- element-ui 的 js 文件 -->
              <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>

              • 如果是发布阶段，我们给htmlWebpackPlugin添加一个标识为true

                //使用插件
                config.plugin('html').tap(args=>{
                  //添加参数isProd
                  args[0].isProd = true
                  return args
                })

              • 如果是开发阶段也添加一个标识，为flase

                //使用插件
                config.plugin('html').tap(args=>{
                  //添加参数isProd
                  args[0].isProd = false
                  return args
                })

              • 在页面通过htmlWebpackPlugin获取到标识，判断该标识为true还是false，如果是true代表发布阶段，应该添加cdn资源，如果是false不需要添加

                <% if(htmlWebpackPlugin.options.isProd){ %>
                cdn资源文件
                 <% } %>

                • 安装 @babel/plugin-syntax-dynamic-import

                • 配置babel-plugins

                  "plugins": [
                      [
                        "component",
                        {
                          "libraryName": "element-ui",
                          "styleLibraryName": "theme-chalk"
                        }
                      ],
                      ...prodPlugins,
                      "@babel/plugin-syntax-dynamic-import"
                    ]

                • 修改引入方式

                  // 登录页
                  const Login = () => import(/* webpackChunkName: "login" */ '../components/Login.vue')
                  // 首页
                  const Home = () => import(/* webpackChunkName: "HomeWelcome" */ '../components/Home.vue')
                  const Welcome = () => import(/* webpackChunkName: "HomeWelcome" */ '../components/Welcome.vue')
                  // 用户列表
                  const User = () => import(/* webpackChunkName: "user" */ '../components/user/Users.vue')
                  // 权限管理
                  const Rights = () => import(/* webpackChunkName: "Rights" */ '../components/power/Rights.vue')
                  const Roles = () => import(/* webpackChunkName: "Rights" */ '../components/power/Roles.vue')
                  // 商品管理
                  const Categories = () => import(/* webpackChunkName: "goods" */ '../components/goods/Categories.vue')
                  const Params = () => import(/* webpackChunkName: "goods" */ '../components/goods/Params.vue')
                  const Goods = () => import(/* webpackChunkName: "goods" */ '../components/goods/Goods.vue')
                  const GoodsAdd = () => import(/* webpackChunkName: "goods" */ '../components/goods/GoodsAdd.vue')
                  // 订单管理
                  const Orders = () => import(/* webpackChunkName: "goods" */ '../components/orders/Orders.vue')
                  // 数据管理
                  const Reports = () => import(/* webpackChunkName: "goods" */ '../components/Reports.vue')

                   

              当匹配某个路由时，才去加载对应的资源文件

              又名：路由按需加载

              实现路由懒加载

        • 第一个作用获取到index.html,在生成一个新的index.html

        • 会自动引入打包的js和css文件

        为什么？

        我们要在index.html中来判断当前环境为开发阶段还是发布阶段，但是在index.html无法获取到process.env.NODE_ENV，但是index.html中可以获取到htmlWebpackPlugin该插件的配置数据。

        根据不同环境定制不同的首页内容

      配置element-ui的cdn资源

通过cdn加载外部资源

自定义入口文件

利用vue.config.js修改webpack的默认配置

只在发布阶段移除console

移除打包之后的console