锐客网

  1. 首页 > 睿知 > >

vue性能优化有哪些 vue性能优化总结( 三 )

生活知识经验知识


npm install image-webpack-loader --save-dev
（2）之后 。在 webpack.base.conf.js 中进行配置：
{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use:[ { loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { loader: 'image-webpack-loader', options: { bypassOnDebug: true, } } ]}
2.2、减少 ES6 转为 ES5 的冗余代码Babel 插件会在将
ES6
代码转换成 ES5 代码时会注入一些辅助函数 。例如下面的 ES6 代码：
class HelloWebpack extends Component{...}
这段代码再被转换成能正常运行的 ES5 代码时需要以下两个辅助函数：
babel-runtime/helpers/createClass // 用来实现 class 语法babel-runtime/helpers/inherits // 用来实现 extends 语法
在默认状态下 。Babel 会在每一个输出文件中内嵌这些依赖的辅助函数代码 。如果多个源代码文件都依赖这些辅助函数 。那么这些辅助函数的代码将会出现很多次 。造成代码冗余 。为了不让这些辅助函数的代码重复出现 。应该在依赖它们时通过 require('babel-runtime/helpers/createClass') 的方法导入 。这样就能做到只让它们出现一次 。babel-plugin-transform-runtime 插件只是用来实现这种作用的 。将有关辅助函数进行代替成导入语句 。从而减小 babel 编译出去的代码的文件大小 。（1）首先 。安装 babel-plugin-transform-runtime ：
npm install babel-plugin-transform-runtime --save-dev
（2）之后 。改写 .babelrc 配置文件为：
plugins: [transform-runtime]
如果要看插件的再多仔细内容 。应该查看babel-plugin-transform-runtime 的 仔细讲解 。
2.3、提取公共代码如果项目中没有去将每一个页面的第三方库和公共模块提取出去 。则项目会存在以下问题：
相同的资源被重复加载 。浪费客户的流量和服务器的成本 。
每一个页面需要加载的资源太大 。导致网页首屏加载慢慢 。波及客户体验 。
所以我们需要将多个页面的公共代码抽离成单独的文件 。来优化以上问题。Webpack 内置了专门用来提取多个Chunk 中的公共部分的插件 CommonsChunkPlugin 。我们在项目中 CommonsChunkPlugin 的配置如下：
// 全部在 package.json 里面依赖的包 。都会被打包进 vendor.js 这种文件中 。
new webpack.optimize.CommonsChunkPlugin( { name: 'vendor', minChunks: function(module, count) { return (module.resource &&/\.js$/.test(module.resource) &&module.resource.indexOf( path.join(__dirname, '../node_modules')) === 0 ); } }),// 抽取出代码模块的映射关系new webpack.optimize.CommonsChunkPlugin({name: 'manifest',chunks: ['vendor']})
如果要看插件的再多仔细内容 。应该查看 CommonsChunkPlugin 的 仔细讲解 。
2.4、模板预编译当使用 DOM 内模板或 javaScript 内的字符串模板时 。模板会在运行时被编译为渲染函数 。往往一般状态下这种过程已经足够快了 。但对性能敏感的应用还是最好避免这种用法 。预编译模板最无脑的方法只是使用单文件组件——有关的构建设置会全自动把预编译处理好 。所以构建好的代码已经内含了编译出去的渲染函数而不是原始的模板字符串 。如果你使用 webpack 。并且热爱分离 JavaScript 和模板文件 。你应该使用 vue-template-loader 。它也应该在构建过程中把模板文件转换变成 JavaScript 渲染函数 。
2.5、提取组件的 CSS当使用单文件组件时 。组件内的 CSS 会以 style 标签的方法通过 JavaScript 动态注入 。这有一些小小的运行时开销 。如果你使用服务端渲染 。这会导致一段 “无样式内容闪烁 (fouc) ”。将全部组件的 CSS 提取到同一个文件应该避免这种问题 。也会让 CSS 更好地进行压缩和缓存 。查阅这种构建工具各自的文档来了解再多：
webpack + vue-loader ( vue-cli 的 webpack 模板已经预先配置好)
Browserify + vueify
Rollup + rollup-plugin-vue
2.6、优化 SourceMap我们在项目进行打包后 。会将研究中的多个文件代码打包到一个文件中 。并且经历过压缩、去掉多余的空格、babel编译化后 。最终将编译获取的代码会用来线上环境 。那么这样处理后的代码和源代码会有蛮大的差别 。当有 bug的时候 。我们就只能定位到压缩处理后的代码地点 。无法定位到研究环境中的代码 。对于研究来说不好调式定位问题 。因此 sourceMap 出现了 。它只是为了解决不好调式代码问题的 。SourceMap 的可选值如下（+ 号越多 。代表速度越快 。- 号越多 。代表速度越慢, o 代表中等速度 ）

vue性能优化有哪些 vue性能优化总结

文章插图
生产环境讲解：cheap-module-source-map原因如下：

推荐阅读


上一篇：如果50光年外存在高级文明,收到地球发射的无线电波后就发动光粒攻击,地球人还有救吗？

下一篇：张大仙试水峡谷寻宝记,400块钱开出3款良心皮肤,仙友：“天美亏大了”,你有何看法？