phpnginx偶然白屏技巧_最全的 Vue 机能优化指南值得收藏

webpack 配置层面的优化；

根本的 Web 技能层面的优化。

当我们须要进行数值打算，并且依赖于其它数据时，该当利用 computed，由于可以利用 computed 的缓存特性，避免每次获取值时，都要重新打算；

当我们须要在数据变革时实行异步或开销较大的操作时，该当利用 watch，利用 watch 选项许可我们实行异步操作 ( 访问一个 API )，限定我们实行该操作的频率，并在我们得到终极结果前，设置中间状态。
这些都是打算属性无法做到的。

更快的内容到达韶光（首屏加载更快）：SPA 会等待所有 Vue 编译后的 js 文件都下载完成后，才开始进行页面的渲染，文件下载等须要一定的韶光等，以是首屏渲染须要一定的韶光；SSR 直接由做事端渲染好页面直接返回显示，无需等待下载 js 文件及再去渲染等，以是 SSR 有更快的内容到达韶光；

更多的开拓条件限定：例如做事端渲染只支持 beforCreate 和 created 两个钩子函数，这会导致一些外部扩展库须要分外处理，才能在做事端渲染运用程序中运行；并且与可以支配在任何静态文件做事器上的完备静态单页面运用程序 SPA 不同，做事端渲染运用程序，须要处于 Node.js server 运行环境；

更多的做事器负载：在 Node.js 中渲染完全的运用程序，显然会比仅仅供应静态文件的 server 更加大量占用CPU 资源，因此如果你预见在高流量环境下利用，请准备相应的做事器负载，并明智地采取缓存策略。

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

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、提取公共代码如果项目中没有去将每个页面的第三方库和公共模块提取出来，则项目会存在以下问题：

相同的资源被重复加载，摧残浪费蹂躏用户的流量和做事器的本钱。

每个页面须要加载的资源太大，导致网页首屏加载缓慢，影响用户体验。

// 所有在 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

cheap：源代码中的列信息是没有任何浸染，因此我们打包后的文件不肯望包含列干系信息，只有行信息能建立打包前后的依赖关系。
因此不管是开拓环境或生产环境，我们都希望添加 cheap 的基本类型来忽略打包前后的列信息；

module ：不管是开拓环境还是正式环境，我们都希望能定位到bug的源代码详细的位置，比如说某个 Vue 文件报错了，我们希望能定位到详细的 Vue 文件，因此我们也须要 module 配置；

soure-map ：source-map 会为每一个打包后的模块天生独立的 soucemap 文件 ，因此我们须要增加source-map 属性；

eval-source-map：eval 打包代码的速率非常快，由于它不天生 map 文件，但是可以对 eval 组合利用 eval-source-map 利用会将 map 文件以 DataURL 的形式存在打包后的 js 文件中。
在正式环境中不要利用 eval-source-map, 由于它会增加文件的大小，但是在开拓环境中，可以试用下，由于他们打包的速率很快。

if (config.build.bundleAnalyzerReport) { var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; webpackConfig.plugins.push(new BundleAnalyzerPlugin());}实行 $ npm run build --report 后天生剖析报告如下：2.8、Vue 项目的编译优化如果你的 Vue 项目利用 Webpack 编译，须要你喝一杯咖啡的韶光，那么大概你须要对项目的 Webpack 配置进行优化，提高 Webpack 的构建效率。
详细如何进行 Vue 项目的 Webpack 构建优化，可以参考作者的另一篇文章《

Vue 项目

安装：

npm install compression --save

添加代码逻辑：

var compression = require('compression');var app = express();app.use(compression())

重启做事，不雅观察网络面板里面的 response header，如果看到如下红圈里的字段则表明 gzip 开启成功 ：

CSS

打开 Chrome 开拓者工具，切换到 Performance 面板

点击 Record 开始录制

刷新页面或展开某个节点

点击 Stop 停滞录制

Vue