使用Webpack加速Vue.js应用的4种方式
Webpack是开发Vue.js单页应用程序的重要工具。 通过管理复杂的构建步骤，你可以更轻松地开发工作流程，并优化应用程序的大小和性能。
其中介绍下面四种方式：
- 单个文件组件
- 优化Vue构建
- 浏览器缓存管理
- 代码分割
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”，例如：
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应用的4种方式的更多相关文章
- webpack配合vue.js实现完整的单页面demo
本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...
- vue.js不仅是一种模式，也是一种工程组织方式
vue.js不仅是一种模式,也是一种工程组织方式
- vue组件通信的几种方式
最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...
- 开发vue全局插件的4种方式
定义全局插件的步骤 定义全局插件 pluginsUtil.js Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象: ex ...
- 黑马vue---56-58、vue组件创建的三种方式
黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...
- 详解vue 路由跳转四种方式 (带参数)
详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1. router-link ? 1 2 3 4 5 6 7 8 9 10 ...
- 基于webpack和vue.js搭建开发环境
前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. ...
- 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- vue.js插入dom节点的方式
html代码: <div id="app"></div> js代码: var MyComponent = Vue.extend({ template: '& ...
随机推荐
- 【css3网页布局】flex盒子模型
1.0 前言 网页布局(layout)是CSS的一个重点应用. 经典布局类型: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊 ...
- 观《IT培训行业揭秘》触发北大青鸟回忆
在园子里看到这篇文章<IT培训行业解密(六)>时,挺有感触,回忆顿时涌上心头: 我想起了当年单纯的我们因为各自的原因来到北大青鸟,或因前途迷茫而选择想找一条出路,或因父母的信息闭塞而想给我 ...
- JVM学习笔记三：垃圾收集器与内存分配策略
内存回收与分配重点关注的是堆内存和方法区内存(程序计数器占用小,虚拟机栈和本地方法栈随线程有相同的生命周期). 一.判断对象是否存活? 1. 引用计数算法 优势:实现简单,效率高. 致命缺陷:无法解决 ...
- 使用CSS设置滚动条样式以及如何去掉滚动条的方法
<STYLE> BODY { SCROLLBAR-FACE-COLOR: #f892cc; SCROLLBAR-HIGHLIGHT-COLOR: #f256c6; SCROLLBAR-SH ...
- Asp.Net Core轻量级Aop解决方案：AspectCore
什么是AspectCore Project ? AspectCore Project 是适用于Asp.Net Core 平台的轻量级 Aop(Aspect-oriented programming) ...
- TreeMap集合特点、排序原理
TreeMap特点(类似于TreeSet): 1.无序,不允许重复(无序指元素顺序与添加顺序不一致) 2.TreeMap集合默认会对键进行排序,所以键必须实现自然排序和定制排序中的一种 3..底层使用 ...
- 最新Hadoop Shell完全讲解
本文为原创博客,转载请注明出处:http://www.cnblogs.com/MrFee/p/4683953.html 1.appendToFile 功能:将一个或多个源文件系统的内容追加至 ...
- VR全景，让VR不再是“空中楼阁“——智慧城市常诚
VR的风口来了又走,而VR技术的支持者却始终在探索VR在各个领域的应用.最近,有业内专家表示,VR给带来的真正好处是,容易让人产生同理心,但同理心究竟能帮助我们做什么呢? 我第一次见到挪威建筑师Haa ...
- 简单两步快速学会使用Mybatis-Generator自动生成entity实体、dao接口和简单mapper映射（用mysql和oracle举例）
前言: mybatis-generator是根据配置文件中我们配置的数据库连接参数自动连接到数据库并根据对应的数据库表自动的生成与之对应mapper映射(比如增删改查,选择性增删改查等等简单语句)文件 ...
- 关于前后端同构，我的一点思路和心得（vue、nodejs、react、模版、amd）
最近1年多,前后端同构慢慢变成一个流行词,也许很多人还停留在前后端分离的最佳实践道路上,但实际上又有一批人已经从简单的服务端渲染走向探索最佳前后端同构方案的路上了.不过,我只是膜拜后者的过客. 虽然大 ...