Vue ssr
码农天地 -
应该避免在 beforeCreate 和 created 生命周期时产生全局副作用的代码。
例如：
其中使用 setInterval 设置 timer。在纯客户端 (client-side only) 的代码中，我们可以设置一个 timer，然后在 beforeDestroy 或 destroyed 生命周期时将其销毁。
但是，由于在 SSR 期间并不会调用销毁钩子函数，所以 timer 将永远保留下来。为了避免这种情况，请将副作用代码移动到 beforeMount 或 mounted 生命周期中。
2 路由懒加载。
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export function createRouter () {
return new Router({
mode: 'history',
routes: [
{ path: '/', component: () => import('./components/Home.vue') },
{ path: '/item/:id', component: () => import('./components/Item.vue') }
]
})
}3 使用Ui框架上按需引入，按需加载。
routes: [
{ path: "/", redirect: "index" },
{
path: "/",
name: "home",
component: resolve=>require(["@/views/home"],resolve),
children: [
{
// 员工查询
path: "/employees",
component: resolve=>require(["@/components/employees"],resolve)
},
{
// 首页
path: "/index",
component: resolve=>require(["@/views/index"],resolve)
},4 gzip压缩
cnpm i compression-webpack-plugin -D在 vue.congig.js中引入并修改 webpack配置:~~~~
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production'
return {
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240, //对超过10k的数据进行压缩
deleteOriginalAssets: false //是否删除原文件
})]
}
}在index.js中加入如下代码
productionGzip: false,
productionGzipExtensions: ['js', 'css']5 使用cdn
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
</div>
</body>然后在webpack.base.conf.js中加入externals
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals: {
'jquery': 'jQuery',
'element-ui':'ELEMENT',
'vue': 'Vue'用户体验上入手。
使用better-click.js，处理Iphone,点击有300毫秒的问题。菊花Loading。骨架屏。 特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。
下一篇： npm知识点
Tags 标签
加个好友，技术交流
