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

时间  2019-11-06
标签 vue 打包 优化 大小 服务 渲染 cli 环境 实现 spa 页面 项目 繁體版
原文   原文链接

引言：

写这篇文章的目的主要在于刚才看了一位掘友的文章，可是我看了他的代码有点粗糙，甚至是我以为没法做为一篇好的给予新手的引导文章。javascript

这里我先抱歉一声，由于我这样作有损你的声誉。php

先放上该掘友的文章，仍是很不错的，只是但愿多点注解会更好：css

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

1、知识点和目的

一、打包优化的目的

优化项目启动速度，和性能vue

二、必要的清理数据java

第一点是核心，第二点呢其实主要是清理consolenode

三、性能优化的主要方向

一、cdn加载react

二、压缩jswebpack

三、减小项目在首次加载的时长（首屏加载优化）ios

四、目前的解决方向

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

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

第一：

尽量的减小首次加载的文件体积，和进行分布加载，这是咱们今天主要讲的

第二：

首屏加载最好的解决方案就是ssr（服务端渲染），还利于seo

可是通常状况下没太多人选择ssr，由于只要不须要seo，ssr更多的是增长了项目开销和技术难度的。不少公司是不会这样选择的

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

这块我先讲，由于篇幅较小，主要也是各大公司已经总结的

一、nuxt.js，地址：https://zh.nuxtjs.org

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

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

注意语雀的链接进去，react和vue都有。因此很全面的。

3、打包优化

一、咱们首先是压缩js，而且开启gzip

这个我用的是vueCLi3.X因此压缩js没必要说，自带的。

说明：开启gzip表明你项目实际环境就可使用gzip。

还有打包的时候不是你打出来的总体包越小越好，虽然从基本面上看确实如此。可是会有几个状况影响你打包的文件大小。

好比map.js文件还有gzip文件。

特别是gzip文件你是不能够删除原文件的。若是删除了原文件那么不支持的浏览器就炸了。因此，最好的方式是用浏览器的f12来观测是最好的

缘由：

第一：浏览器须要支持

第二：须要后端配置，这里提供nginx方式：

http:{ 
      gzip on; #开启或关闭gzip on off
      gzip_disable "msie6"; #不使用gzip IE6
      gzip_min_length 100k; #gzip压缩最小文件大小，超出进行压缩（自行调节）
      gzip_buffers 4 16k; #buffer 不用修改
      gzip_comp_level 8; #压缩级别:1-10，数字越大压缩的越好，时间也越长
      gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩文件类型 
}
复制代码

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: {}
};复制代码

二、去除没必要要的提示和拆分与抽离公共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"
        }
      }
    }
  }
},复制代码

三、项目去除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
            }
          }
        })
      ]
    }
  }
};
复制代码


关闭eslint关于console的提示。很烦的。

.eslintrc.js文件

rules: {
  "no-console": "off",
  "no-debugger": "off"
},复制代码

四、项目中能用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



五、cdn加载，可是不去除import引入方式

这是掘友提供的，文章第三次修改。

这个方式的优势是不须要删除上述三个文件的代码，直接就能够拿来用。

扩展一下，该方法也能够做为不打包指定的js的方式。

官方文档的解释：若是咱们想引用一个库，可是又不想让webpack打包

修改vue.config.js

configureWebpack:{
    externals: {
       'vue': 'Vue',
       "vue-router": "VueRouter",
       'vuex': 'Vuex'
    }
  },复制代码

把上一步当中关于vue，vuex，等注释放开

router.js文件

修改成：

import Vue from "vue";
import VueRouter 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")
    }
  ]
});
复制代码


这样就能够了。这个是后续掘友提供的方法。更加顺滑的切换，而且更符合模块化开发。

我的已经试验过，而且修正。

不会增长包大小，也不须要注释import。

这是第四次修改文章，代码已经提交到git上。

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

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

咱们如今大部分都用的是vuecli，可是若是一个老项目的话就不能用vuecli了。因此就须要非cli环境下进行开发。下面是我以前找的两个非cli环境下的项目

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

一、sea.js

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

二、require.js

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程