vue打包优化大小,vue服务端渲染,非cli环境实现spa单页面项目

32 篇文章 2 订阅
30 篇文章 0 订阅

引言:

写这篇文章的目的主要在于刚才看了一位掘友的文章,但是我看了他的代码有点粗糙,甚至是我觉得无法作为一篇好的给予新手的引导文章。

这里我先抱歉一声,因为我这样做有损你的声誉。

先放上该掘友的文章,还是很不错的,只是希望多点注解会更好:

https://juejin.im/post/5d9ff02df265da5baf4104d9#comment

一、知识点和目的

1、打包优化的目的

优化项目启动速度,和性能

2、必要的清理数据

第一点是核心,第二点呢其实主要是清理console

3、性能优化的主要方向

1、cdn加载

2、压缩js

3、减少项目在首次加载的时长(首屏加载优化)

4、目前的解决方向

cdn加载不比多说,就是改为引入外部js路径

首屏加载优化方面主要其实就两点

第一:

尽可能的减少首次加载的文件体积,和进行分布加载,这是我们今天主要讲的

第二:

首屏加载最好的解决方案就是ssr(服务端渲染),还利于seo

但是一般情况下没太多人选择ssr,因为只要不需要seo,ssr更多的是增加了项目开销和技术难度的。很多公司是不会这样选择的

二、服务端渲染解决方案提供

这块我先讲,因为篇幅较小,主要也是各大公司已经总结的

1、nuxt.js,地址:https://zh.nuxtjs.org

2、egg.js解决方案:地址:https://www.yuque.com/easy-team

我个人喜欢阿里团队的方式,毕竟性能更好,但是呢技术要求也更高。

三、打包优化

1、我们首先是压缩js,并且开启gzip

这个我用的是vueCLi3.X所以压缩js不必说,自带的。

gizp部分:

npm install compression-webpack-plugin

下面是我的vue.config.js

const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = [
  "js",
  "css",
  "svg",
  "woff",
  "ttf",
  "json",
  "html"
];

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/", //部署应用包时的基本 URL
  outputDir: "dist", //打包目录
  indexPath: "index.html",
  configureWebpack: {
    plugins: [
      //开启gzip压缩
      new CompressionWebpackPlugin({
        filename: "[path].gz[query]",
        test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
        threshold: 10240,
        minRatio: 0.8, //压缩率大于0.8的才压缩
        deleteOriginalAssets: false //是否删除原文件
      })
    ]
  },
  productionSourceMap: false, //不输出map文件
  devServer: {}
};

2、去除不必要的提示和拆分与抽离公共js

这里performance就是关闭每次打包之后的文件过大警告

optimization这个比较复杂,主要是拆分js和抽离公共js的。

提供一篇csdn的文章:https://blog.csdn.net/weixin_43678786/article/details/85788759

webpack官方文档:https://webpack.docschina.org/configuration/optimization/

configureWebpack: {
  //关闭文件过大提示,利于打包加快速度
  performance: {
    hints: "warning",
    //入口起点的最大体积
    maxEntrypointSize: 50000000,
    //生成文件的最大体积
    maxAssetSize: 30000000,
    //只给出 js 文件的性能提示
    assetFilter: function(assetFilename) {
      return assetFilename.endsWith(".js");
    }
  },
  //公共代码抽离和代码分割,避免单个js文件过大
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: "all",
          test: /node_modules/,
          name: "vendor",
          minChunks: 1,
          maxInitialRequests: 5,
          minSize: 30000,
          priority: 100
        },
        common: {
          chunks: "all",
          test: /[\\/]src[\\/]js[\\/]/,
          name: "common",
          minChunks: 3,
          maxInitialRequests: 5,
          minSize: 30000,
          priority: 60
        },
        styles: {
          name: "styles",
          test: /\.(sa|sc|c)ss$/,
          chunks: "all",
          enforce: true
        },
        runtimeChunk: {
          name: "manifest"
        }
      }
    }
  }
},

3、项目去除console.log

这个项目上线那是基本上必须的,所以也提供下。

有两种方式

第一种:babel方式

npm install babel-plugin-transform-remove-console --save-dev

babel.config.js文件改为

let plugins = [];
if (process.env.NODE_ENV === "production") {
  plugins.push("transform-remove-console");
}

module.exports = {
  plugins: plugins,
  presets: ["@vue/app"]
};

 

第二种:webpack方式

npm install uglifyjs-webpack-plugin

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/", //部署应用包时的基本 URL
  outputDir: "miniprogram", //打包目录
  indexPath: "index.html",
  configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_console: true, //console
              drop_debugger: true,
              pure_funcs: ["console.log"] //移除console
            }
          }
        })
      ]
    }
  }
};

4、项目中能用cdn加载的都用cdn加载

这里我是基础的项目模版,所以没有加入axios,但是原理一致。

总体来说能用cdn加载的js都可以这样干。但是我必须做出说明该方式的有点和缺点。

缺点:

a、项目依赖会比较难以处理,毕竟全部放index.html下面真的很丑

b、对于大厂来说或者说带宽够高的情况下,对于首屏渲染的差别较小。

原因在于,改用cdn加载主要是降低服务器流量,但是js加载只是放在了别服务器,难道也不需要加载了?所以有用,但是呢一定规模后会有弊端出现。

下面是我把vue的基本三要素都改为cdn加载了

包含,vuerouter,vue,vuex

main.js文件

//import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

 

router.js

这个路由懒加载必须的,这个也很影响首屏加载。(必须)

//import Vue from "vue";
//import Router from "vue-router";

Vue.use(VueRouter);

export default new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: () => import("./views/Home.vue")
    },
    {
      path: "/about",
      name: "about",
      component: () => import("./views/About.vue")
    }
  ]
});

 

store.js

//import Vue from "vue";
//import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    ceshi: "dht"
  },
  mutations: {},
  actions: {}
});

 

最后是打包出来的结果:

很小吧,而且我初步试验过,对于scss的处理和scpoe(css样式不冲突)没有影响,vuex也是正常运行。

然后这是我仅仅是把vue加载注释去掉

就加了60kb

四、git地址提供和不使用vueCli下怎么去实现vue单页面项目

首先是本项目的地址:https://github.com/ht-sauce/performance-optimization

我们现在大部分都用的是vuecli,但是如果一个老项目的话就不能用vuecli了。所以就需要非cli环境下进行开发。下面是我之前找的两个非cli环境下的项目

注意该两个项目最好是放在nginx或者tomcat下运行,如果是webstrom的话直接右键运行index.html。直接双击html文件是无法运行的。

1、sea.js

https://github.com/ht-sauce/seajs-vue-spa

2、require.js

https://github.com/ht-sauce/vue-requirejs-spa

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值