vue打包优化流程

最新推荐文章于 2024-01-23 11:02:37 发布

原创最新推荐文章于 2024-01-23 11:02:37 发布 · 191 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue项目中配置publicPath以实现相对路径访问，优化路由懒加载以提高性能，移除打包后的console输出，以及如何通过terser和CDN管理第三方库。

1.配置vue.config.js

// 覆盖默认的webpack配置
module.exports = {
  publicPath: './',  //设置以相对路径作为访问方式
  devServer: {  // 配置服务器参数
    port: 3000,  //设置默认端口号
    open: true  //设置自动打开页面
  }
}

2.配置路由懒加载

// 原来的形式：此种方式会在初始化时便将所有路由加载
import login from '../views/login.vue'
const routes = [
{
    path: '/login',
    name: 'login',
    component: login
  }
]

// 优化后的形式：此种方式会在使用到该路由的时候才会加载
const routes = [
{
    path: '/login',
    name: 'login',
    component: ()=>import('../views/login.vue')
  }
]

3.去掉打包后的console

(1)安装依赖

npm i terser-webpack-plugin -D

(2)vue.config.js文件中添加配置

// 移除打印 terser是一种比较好的方式
   chainWebpack: (config) => {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
  }

4.移出第三方包，替换为CDN资源
(1)vue.config.js文件中添加配置

// 获取当前环境
const  env = process.env.NODE_ENV
if(env === 'production'){  // 表示在生产环境下，对这些包做标记，将进行处理
externals =  {
// import 时的包名称 : window 全局的成员全称
vuex: 'Vuex',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
'element-ui': 'Element',
}
}
module.exports = {
// 通过该命令移出第三方包
configureWebpack: {
// 打包优化
externals
}
}

在public/index.html文件中，做如下配置

// 表示在生产环境下，导入这些CDN资源
 <% if(process.env.NODE_ENV === 'production') { %>    
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.2/dist/vue-router.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/axios@0.21.3/dist/axios.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.5/lib/index.js"></script>
      <% } %>

最后 npm run build 打包即可