Vue高效的构建打包发布

项目快结束啦，今天学习怎么优化打包项目，ヾ(◍°∇°◍)ﾉﾞ
在命令行中输入以下命令，在dist下生成report.html，打开可以看到每部分大小~

npm run build -- --report

在项目中较大的有moment.js，但是里面的语言包没有用到，因此在vue.config.js中配置如下，用于忽略语言包。再次打包后少了约210k。

优化moment.js：

const webpack = require("webpack");
module.exports = {
  configureWebpack: {
    plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
  },
};

以上优化moment.js将全部的语言包去掉，但是我使用的ant-design-vue中使用了日期选择器组件需要其中的中文包，如果将全部语言包去掉则日期选择器中显示英文。因此需要将中文包留下。

const webpack = require("webpack");
const path = require("path");
module.exports = {
  configureWebpack: {
    plugins: [
      // 只加载 `moment/locale/zh-cn.js` 
      new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/)
    ],
  },
};

优化xlsx：
由于用到xlsx导出表格数据，将Export2Excel.js中直接引入“xlsx”修改成“xlsx/dist/xlsx.mini.min.js”，再次打包后少了710kb大小~

import XLSX from 'xlsx'
// 修改为
import XLSX from 'xlsx/dist/xlsx.mini.min.js'

路由懒加载
将app.js中路由按需引入。可以提升加载速度。其中/* webpackChunkName: “view” */ 可以在打包后看到组件的大小。

// 普通引入
import View from "@/views/index";
// 路由懒加载
const View = () => import( /* webpackChunkName: "view" */"@/views/index");

ant-design-vue icon按需引入
在report.html中显示ant design vue的icons显示过大。因此这里按需引入图标。
首先新建icons.js用于放置图标，路径为src/assets/js/icons.js。使用方式如下，如果不知道图标引入名称可以去node_modules下@ant-design/icons/lib/下查看。

export {
  default as questionCircle
} from "@ant-design/icons/lib/outline/QuestionCircleOutline";

其次，需要修改vue.config.js。重新打包后，体积减小。这里遇到了一个小小的问题，引入图标后message和notification中的图标不会显示，需要仔细查看后发现忘记引入图标或者不是outline风格图标。

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  configureWebpack: {
    resolve: {
      alias: {
        "@ant-design/icons/lib/dist$": path.resolve(
          __dirname,
          "./src/assets/js/icons.js"
        )
      }
    },
  },
 }

echarts CDN引入
echarts引入本来也是想要按需引入。但是由于项目中用到了地图，引入china.js后按需引入不生效，故采用CDN引入。将echarts uninstall后在index.html中引入：

<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.js"></script>
<script src="http://gallery.echartsjs.com/dep/echarts/map/js/china.js"></script>

在vue.config.js中修改echarts引入方式。

module.exports = {
    externals: {
      echarts: "echarts"
    }
  },

dist下js文件夹中的map文件去除
在webpack中配置禁止生产js的map文件。map文件在遇到bug时可以直接在浏览器中看到源码进行调试。有需要的话可以不关闭。

 productionSourceMap: false /* 禁止生成js的map文件 */,

好啦，先到这里。
https://github.com/Gesj-yean/vue-demo-collection 记录了更多优秀插件的使用方法。有时间的同学请看我的置顶博客，可太感谢啦。

Gesj-yean

发布了27 篇原创文章 · 获赞 4 · 访问量 2824

私信关注

Vue高效的构建打包发布

猜你喜欢