vue-cli打包优化

参考文章https://github.com/kaola-fed/blog/issues/204 

 https://segmentfault.com/a/1190000013239622

打包优化主要是三个方面

  1. 下载文件速度慢

  2. 解析JS比较慢

  3. 渲染比较慢

服务端渲染(SSR)(服务器端渲染是加载最快的一种方式)

SEO优化

在服务端先将JS进行解析,解析完成之后生成HTML片段,再将HTML返回给前端,前端直接执行渲染界面

抽取CSS (这个vue-cli中已经解决了)如图

webpack中压缩js 的插件叫 uglifyjs-webpack-plugin,

压缩css 的插件叫 optimize-css-assets-webpack-plugin

// css 压缩代码,将下面代码添加上去
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),
 // 压缩js代码,将下面代码添加上去
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),

不生成.map的文件 是否压缩 

productionSourceMap: false, 是否生成.map文件

productionGzip: true, 是否启用压缩功能

productionGzipExtensions: ['js', 'css'], 压缩的文件

利用cdn 

//index.html

 <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script>
  <script src="https://cdn.bootcss.com/moment.js/2.20.1/locale/zh-cn.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/javascript.min.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/bash.min.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/xml.min.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/css.min.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/markdown.min.js"></script>

删除依赖
这些依赖以前是使用npm安装,现在需要在项目文件注释掉(或直接删除这些依赖),所有用到这些你需要替换的第三方依赖文件的代码都需要删除或注释

eg:
// import Vue from 'vue'
// import VueRouter from 'vue-router'

然后在webpack的配置文件里加入如下代码

  externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'axios': 'axios',
    'moment': 'moment',
    'highlight.js': 'highlight.js'
  }

注意后面的名称是改模块暴露出来的名称,具体不熟悉的可以到引入的js源码里查看。

组件按需加载 也叫路由懒加载 也叫组件异步加载

vue-router提供的路由懒加载可以按需加载组件。

特点: 当没有访问到某个页面路由时,不去加载对应的组件代码,节约数据请求量,加快首页DOM渲染速度

将import home from './components/Home.vue' 这种导入方式换成
const home = () => import('../components/Home.vue');

分离第三方包

 1. 引入webpack和路径处理模块
var webpack = require('webpack');
var path = require('path');

2. 修改入口文件
entry: {
    app: path.resolve(__dirname, 'src/main.js'),
    // 需要分离的第三方包名写在数组中
    vendors: ['vue', 'vue-resource', 'vue-router', 'vuex', 'mint-ui', 'moment', 'vue-preview']
},

3. plugin中配置插件
// 分离第三方包插件
new webpack.optimize.CommonsChunkPlugin({
    name: 'vendors',
    filename: 'vendors.js' // 分离出来的js文件的名称
})

vue-cli中在webpack.prod.conf.js是这样配置的


new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-cli-service build是一个用于构建Vue项目的命令。它是通过调用vue-cli-service模块来执行构建操作的。具体来说,vue-cli-service指令作为入口文件,被node.exe调用,并将运行参数传递给Service服务模块。该命令会编译和打包Vue项目的源代码,生成用于部署的最终版本。它会将Vue组件、JavaScript文件、CSS样式等打包成静态资源文件,以便在浏览器中运行。通过执行vue-cli-service build命令,您可以生成一个用于生产环境的优化、压缩的Vue项目。请确保您已经按照相应的依赖和配置进行安装和设置,以便成功执行该命令。 vue-cli-service lint是用于代码风格检查的命令。lint命令通过调用vue-cli-service模块,使用ESLint工具对Vue项目的代码进行静态分析,以确保代码符合指定的编码规范。它会检查代码中的潜在错误、不规范的代码风格以及其他一些代码质量问题,并提供相应的提示和警告。通过执行vue-cli-service lint命令,您可以检查和修复代码中的潜在问题,以提高代码的可读性和可维护性。请注意,使用lint命令之前,您需要在项目中配置相应的ESLint规则和配置文件。 总结起来,vue-cli-service build用于构建Vue项目,将源代码打包成可部署的静态资源文件,而vue-cli-service lint用于代码风格检查,帮助您确保代码符合指定的编码规范。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue serve及其与vue-cli-service serve之间的关系](https://blog.csdn.net/pulledup/article/details/126950958)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值