项目打包的一些优化

1.双击打开index.html

 

打包之后，会得到dist目录，如果希望可以双击打开index.html，则需要提前在vue.config.js中配置

{
  	publicPath: './'
}

2.路由懒加载

{
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

懒加载的意思是：只有在路由进入这个页面时，才去加载这个组件对应的资源。

懒加载的魔法注释

components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue");

通过在注释中指定webpackChunkName，可以人为设置这个文件的名字,看下图

 3.去掉console-log

chainWebpack(config) {
....省略其他

    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })

.....
}