使用Webpack提高Vue.js应用的方式汇总(四种)


Posted in Javascript onJuly 10, 2017

Webpack是开发Vue.js单页应用程序的重要工具。 通过管理复杂的构建步骤,你可以更轻松地开发工作流程,并优化应用程序的大小和性能。

其中介绍下面四种方式:

  1. 单个文件组件
  2. 优化Vue构建
  3. 浏览器缓存管理
  4. 代码分割 

1.单个文件组件

Vue的特殊功能之一是使用HTML作为组件模板。 尽管如此,它们还有一个内在的问题:你的HTML标记需要是一个尴尬的JavaScript字符串,

否则你的模板和组件定义将需要在单独的文件中,使其难以使用。

Vue有一个优雅的解决方案,称为单文件组件(SFC),其中包括模板,组件定义和CSS全部在一个整齐的.vue文件中:

如下模块mycomponent.vue(html +js +css)

<template>
 <div id="my-component">...</div>
</template>
<script>
 export default {...}
</script>
<style>
 #my-component {...}
</style>

SFC通过vue-loader Webpack插件实现。 这个装载器将SFC的语言块和管道分成一个适当的装载器,例如 脚本块转到babel-loader,而模板块转到Vue自己的vue-template-loader,

将模板转换为JavaScript渲染功能。

vue-loader的最终输出是一个可以包含在Webpack包中的JavaScript模块。

vue-loader的典型配置如下:(webpack.base.conf.js)

module: {
 rules: [
  {
   test: /\.vue$/,
   loader: 'vue-loader',
   options: {
    loaders: {
     // Override the default loaders
    }
   }
  },
 ]
}

 2. 优化Vue构建--运行时版本构建

如果你仅在Vue应用程序*中使用渲染功能,并且没有HTML模板,则不需要Vue的模板编译器。 你可以通过从Webpack构建中省略编译器来减少捆绑包大小。

*记住,单个文件组件模板是在开发中预编译的,以渲染功能!

Vue.js库中只有一个运行时版本的构建,其中包含Vue.js除了模板编译器(称为vue.runtime.js)之外的所有功能。 它比完整版小约20KB,所以值得使用,如果可以的话。

默认情况下使用运行时版本,因此每次使用“vue”的import vue 来引入需要的文件;

通过起别名来简化文件中繁琐的路径引用:(webpack.base.conf.js)

resolve: {
 alias: {
  'vue$': 'vue/dist/vue.esm.js' // Use the full build
 }
},

 剥离生产中的警告和错误消息

减少Vue.js构建大小的另一种方法是删除生产中的任何错误消息和警告。 去掉不必要的代码减少输出捆绑包大小

我们可以这样设置:只在生产环境中添加这些警告

if (process.env.NODE_ENV !== 'production') {
 warn(("Error in " + info + ": \"" + (err.toString()) + "\""), vm);
}

如果process.env.NODE_ENV设置为生产,那么在构建过程中,这些警告块可以通过分解器自动从代码中删除。

你可以使用DefinePlugin设置process.env.NODE_ENV的值,并使用UglifyJsPlugin来缩小代码并将未使用的块删除:

if (process.env.NODE_ENV === 'production') {
 module.exports.plugins = (module.exports.plugins || []).concat([
  new webpack.DefinePlugin({
   'process.env': {
    NODE_ENV: '"production"'
   }
  }),
  new webpack.optimize.UglifyJsPlugin()
 ])
}

3. 浏览器缓存管理

用户的浏览器将缓存你的站点的文件

 如果所有的代码都在一个文件中,那么一个微小的变化将意味着整个文件将需要重新下载。

理想情况下,你希望用户尽可能少的下载,因此在你的应用程序中将很少更改的代码和频繁更改的代码分开处理会更好

 3.1 Vendor 文件

这个Common Chunks插件可以从你的应用程序代码(可能在每个部署中更改的代码)解耦你的vendor 代码(例如,Vue.js库)。

你可以查看依赖项是否来自node_modules文件夹,如果是,则将其输出到单独的文件vendor.js中:

new webpack.optimize.CommonsChunkPlugin({
 name: 'vendor',
 minChunks: function (module) {
  return module.context && module.context.indexOf('node_modules') !== -1;
 }
})

最后在构建输出中有两个单独的文件,这些文件将由浏览器独立缓存:

<script src="vendor.js" charset="utf-8"></script>
<script src="app.js" charset="utf-8"></script>

 3.2 Fingerprinting

构建文件发生变化时,我们如何修改浏览器的缓存?

默认情况下,只有当缓存文件过期时,或者当用户手动清除缓存时,浏览器将再次从服务器请求该文件。 如果服务器指示文件已更改,则文件将被重新下载(否则服务器返回HTTP 304未修改)。

为了保存不必要的服务器请求,我们可以在每次内容更改时更改文件的名称,以强制浏览器重新下载。 这样做的一个简单系统是通过附加一个哈希来为文件名添加一个“fingerprint”,例如:

使用Webpack提高Vue.js应用的方式汇总(四种)

 

Common Chunks插件发出一个“chunkhash”,如果文件的内容已经更改,它将被更新。 当它们输出时,Webpack可以将这个哈希追加到文件名中:

output: {
 filename: '[name].[chunkhash].js'
},

当你这样做时,你会看到你输出的文件将具有像app.3b80b7c17398c31e4705.js这样的名称。

 3.3 自动注入构建文件

当然,如果你添加一个哈希,你必须更新索引文件中的文件的引用,否则浏览器将不会知道它:

<script src="app.3b80b7c17398c31e4705.js"></script>

这将是一个非常繁琐的工作,手动执行,所以使用HTML Webpack插件为你做。 该插件可以在捆绑过程中自动将构建文件的引用注入到HTML文件中。

首先删除对构建文件的引用:(index.html)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>test-6</title>
 </head>
 <body>
  <div id="app"></div>
  <!-- built files should go here, but will be auto injected -->
 </body>
</html>

并将HTML Webpack Plugin添加到Webpack config中:

new HtmlWebpackPlugin({
 filename: 'index.html'
 template: 'index.html',
 inject: true,
 chunksSortMode: 'dependency'
}),

这样配置完成之后在index.html中就会自动引用构建的文件

4.代码分割

默认情况下,Webpack会将你的所有应用程序代码输出为一个大捆绑文件。 但是,如果你的应用程序有多个页面,则使用分割代码将更有效,

每个单独的页面代码都在单独的文件中,并且仅在需要时加载是更好的选择。

Webpack有一个名为“代码分割”的功能,正是这样。 在Vue.js中实现这一点也需要异步组件,并且通过Vue Router变得更加容易。

  4.1 异步组件

异步组件不是将定义对象作为其第二个参数,而是具有解析定义对象的Promise函数,例如:

Vue.component('async-component', function (resolve, reject) {
 setTimeout(() => {
  resolve({
   // Component definition including props, methods etc.
  });
 }, 1000)
})

当组件实际需要呈现时,Vue将只调用该函数。 它还将缓存未来重新渲染的结果。

如果我们构建我们的应用程序,因此每个“页面”都是一个组件,并且我们将定义存储在我们的服务器上,那么我们就是中断实现代码分割的途径。

 

4.2 require要求

要从服务器加载异步组件的代码,请使用Webpack require语法。 这将指示Webpack在构建时将单独的软件包中的async组件捆绑在一起,

而且更好的是,Webpack将使用AJAX处理此捆绑包的加载,因此你的代码可以简单如下:

Vue.component('async-component', function (resolve) {
 require(['./AsyncComponent.vue'], resolve)
});

4.3 懒加载 (router.js)

在路由配置文件中一般的都是直接导入比如

import HomePage from './HomePage '

如果想路由页面只在用到时候加载可以修改如下

const HomePage = resolve => require(['./HomePage.vue'], resolve);
const rounter = new VueRouter({
 routes: [
  {
   path: '/',
   name: 'HomePage',
   component: HomePage
  }
 ]
})

以上所述是小编给大家介绍的使用Webpack提高Vue.js应用的方式汇总(四种),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
大家未必知道的Js技巧收藏
Apr 07 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 Javascript
在vue中获取dom元素内容的方法
Jul 10 #Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 #jQuery
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 #Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 #Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 #Javascript
vue实现表格数据的增删改查
Jul 10 #Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 #Javascript
You might like
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
javascript整除实现代码
2010/11/23 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
Python安装第三方库的3种方法
2015/06/21 Python
浅谈Python中的闭包
2015/07/08 Python
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
深入浅析Python中的迭代器
2019/06/04 Python
Python的Lambda函数用法详解
2019/09/03 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
python读取Kafka实例
2019/12/23 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
python让函数不返回结果的方法
2020/06/22 Python
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
涉外文秘个人求职的自我评价
2013/10/07 职场文书
打架检讨书100字
2014/01/19 职场文书
市场安全管理制度
2014/01/26 职场文书
公司员工体检通知
2015/04/21 职场文书
2019军训心得体会
2019/06/27 职场文书