vue中打包优化瘦身

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

 路由懒加载 只有在路由进入到这个页面的时候 才会去加载这个组件的资源

 

路由懒加载中的魔法注释  可以人为设置这个文件的名字 （在注释中指定webpackChunkName）

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

打包去除console.log 在vue.config.js中配置

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

包大小分析

npm run preview -- --report

访问http://localhost:9526/report.html

方块越大 说明文件占用就越大 对访问速度要求就越高

webpack配置排除打包-打包瘦身并引入网络资源

在vue.config.js中 configureWebpack中添加externals项

 在开发时 文件资源还是在本地node_modules中  只有上线后才需要去外部寻找资源 搜索cdn即可

let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
  externals = {
      /**
      * externals 对象属性解析：
      * '包名' : '在项目中引入的名字'
    */
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'xlsx': 'XLSX'
  }
  cdn = {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
    ],
    js: [
      // vue must at first!
      'https://unpkg.com/vue@2.6.12/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui/lib/index.js', // element-ui js
      'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', // xlsx
    ]
  }
}

注入cdn配置到html模板中

 然后找到public/index.html 中注入css和js

     <!-- 引入样式 -->
     <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
       <link rel="stylesheet" href="<%=css%>">
     <% } %>


    <!-- 引入JS -->
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%=js%>"></script>
    <% } %>