vue 打包优化

1. webpack-bundle-analyzer

npm install --save-dev webpack-bundle-analyzer

vue.config.js 配置

module.exports = {
 configureWebpack: {
   plugins: [
   new BundleAnalyzerPlugin()
   ]
 }
}

在打包命令后面添加 --report

执行打包命令 npm run build:prod    // 会出现下图页面 查看包大小分布情况

注意 从图中可看出element-ui这种三方库占用的是相当大的,

解决:

首先在vue.config.js 中增加  externals:{
'vue':'Vue',
}


小vue 代表main.js中 import 引入的那个vue   ,  后面大 Vue 就是全局变量的名字

module.exports = {
 configureWebpack: {
  externals:{  // 配置这些 我们在打包的时候就不会把在main.js中引用的这几项,打包到最终的js文件中
      'vue':'Vue',
      'vue-router':'Router',
      'vuex':'Vuex',
      'element-ui':'Element',
      'axios':'axios'
    },
   plugins: [
   new BundleAnalyzerPlugin()
   ]
 }
}

那不打包到js中我们怎么获取到这些代码呢?

1. 可以通过cdn方式 比如 bootcdn

1. 搜索vue找2.6.12

2. 复制vue.main.js

3. 然后放到ingdex.html下面 如下图

可以通过引用cdn的方式解决

 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.9/vue-router.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.6.0/vuex.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>

     <!-- 引入样式   官方提供的链接 -->
     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
     <!-- 引入组件库 -->
     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 

禁止打包到js后