使用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 相关文章推荐
jquery获取input表单值的代码
Apr 19 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
js实现常见的工具条效果
Mar 02 Javascript
详解vue axios中文文档
Sep 12 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
php GUID生成函数和类
2014/03/10 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python制作Windows系统服务
2017/03/25 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
详解Python是如何实现issubclass的
2019/07/24 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
出纳岗位职责范本
2013/12/01 职场文书
运动会致辞稿50字
2014/02/04 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
作文批改评语大全
2014/04/23 职场文书
写给医院的感谢信
2015/01/22 职场文书
刑事上诉状范文
2015/05/22 职场文书
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers