vue-extend-template-loader 是一个提供了多种便利方法的vue项目优化工具库。它可以自动将不同vue文件中重复的template合并并缓存起来，使得打包后的文件大小更加紧凑，同时还能提高页面渲染速度。本文将会介绍 vue-extend-template-loader 的使用方法。
安装
首先，需要在项目中引入本包，可以通过npm进行安装：
sudo npm install vue-extend-template-loader --save-dev
使用方法
在 webpack.config.js 中添加 vue-extend-template-loader:
-- -------------------- ---- -------
-------------- - -
------ - -
------ -
-
----- ---------
------- -------------
-------- -
-------- -
----- ----------------------------
-
-
-
-
-
-在这里，我们把 vue-extend-template-loader 的 loader name设置为 'html'，这也是loader解析时会用到的名称。
示例
假设我们有两个文件 HomePage.vue 和 AboutPage.vue，它们使用到了同一个template：
-- -------------------- ---- -------
-- ------------
----------
-----
----------- ---------
------- ------- --------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------- -------
-
-
-
---------
-- -------------
----------
-----
--------------
------- ------- --------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------- -------
-
-
-
---------在不使用 vue-extend-template-loader 的情况下，这两个组件都会生成一个完整的template。但是，如果我们应用上了 vue-extend-template-loader，两个组件都会使用同一个模板：
-- -------------------- ---- -------
-- ------------
--------- ----------------------------------------
--------
------ ------- -
------ -
------ -
-------- ------- -------
-
-
-
---------
-- -------------
--------- ----------------------------------------
--------
------ ------- -
------ -
------ -
-------- ------- -------
-
-
-
---------总结
vue-extend-template-loader 可以很好地帮助我们优化vue项目的打包大小，加速页面加载时间。通过上面的介绍，我们学习了如何安装、配置以及如何应用 vue-extend-template-loader，我相信这对你的项目的提高一定会带来很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d09270238225dc