zoukankan      html  css  js  c++  java
  • 一次vue-cli 2.x项目打包优化经历(优化xlsx插件)

    一、分析各模块打包后大小

    用vue-cli创建的项目,已经集成 webpack-bundle-analyzer。
    详见文件 build/webpack.prod.conf.js,代码如下:

    
    if (config.build.bundleAnalyzerReport) {
      const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
      webpackConfig.plugins.push(new BundleAnalyzerPlugin())
    }
    

    运行npm run build --report后,会提示:

    
    Webpack Bundle Analyzer is started at http://127.0.0.1:8888
    Use Ctrl+C to close it
    

    在该网址上可查看详细信息。

    二、发现项目里打包后比较大的模块

    发现xlsx(官方github地址:https://github.com/SheetJS/js...)打包后很大,因为在好多组件里都引用了 import XLSX from 'xlsx',每个组件都会包含这个xlsx。

    三、优化

    将引用放在 src/main.js 中,只引用一次,再绑定的Vue的prototype上。

    
    import Vue from 'vue'
    import XLSX from 'xlsx'
    Vue.prototype.$XLSX = XLSX
    

    其他组件里使用,直接调用this.$XLSX就可以了。

    四、结论

    一次引用,绑定到Vue的prototype上,在组件里使用。这样能避免组件每次都import,也避免组件打包后很大。

    原文地址:https://segmentfault.com/a/1190000014284449

  • 相关阅读:
    CentOS 7 安装java 环境
    CentOS 7 替换网易yum 源
    九度:题目1553:时钟
    Maximum Subarray
    职场细节
    poj2524 Ubiquitous Religions
    九度 1526:朋友圈
    程序载入
    设备管理
    操作系统系列
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9917066.html
Copyright © 2011-2022 走看看