1.修改source-map配置:此配置能大大减少打包后文件体积。

  a.首先修改 /config/index.js 文件:  

  // /config/index.js
  dev环境:devtool: 'eval'(最快速度)
  prod环境:productionSourceMap: false(关闭source-map)   b.然后修改 /src/main.js 文件,关闭生产环境的调试信息
  // /src/main.js
  const isDebug_mode = process.env.NODE_ENV !== 'production'
  Vue.config.debug = isDebug_mode
  Vue.config.devtools = isDebug_mode
  Vue.config.productionTip = isDebug_mode

  

2.启用happypack多核构建项目
 
  安装happypack后,修改 /build/webpack.base.conf.js 文件即可
  

  npm install happypack --save-dev

  // /build/webpack.base.conf.js
  const HappyPack = require('happypack')
  const os = require('os')
  const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
  
  // 增加HappyPack插件
  plugins: [
  new HappyPack({
  id: 'happy-babel-js',
  loaders: ['babel-loader?cacheDirectory=true'],
  threadPool: happyThreadPool,
  })
  ]
  // 修改引入loader
  {
  test: /\.js$/,
  // loader: 'babel-loader',
  loader: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader
  include: [resolve('src'), resolve('test')]
  }

  

 
3.启用DllPlugin和DllReferencePlugin预编译库文件
   
  这是最复杂也是提升效果最明显的一步,原理是将第三方库文件单独编译打包一次,以后的构建都不需要再编译打包第三方库
  
   a.增加 build/webpack.dll.config.js 文件,并在其中配置需要单独DLL化的模块
    

const path = require("path")
const webpack = require("webpack") module.exports = {
// 你想要打包的模块的数组
entry: {
vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'iview']
},
output: {
path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
filename: '[name].dll.js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_library',
context: __dirname
}),
// 压缩打包的文件
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}

 b. 在 build/webpack.dev.conf.js 和 build/webpack.prod.conf.js 增加如下插件

new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./vendor-manifest.json')
})

 c.在 /package.json 增加命令  

"dll": "webpack --config ./build/webpack.dll.config.js"

 d.在 /index.html 增加DLL化JS引入(必须首先引入)

<script src="/static/js/vendor.dll.js"></script>

 e.执行构建

npm run dll(这一步会生成build/vendor-manifest.json和static/js/vendor.dll.js)
npm run dev 或 npm run build

  

 4.通过 externals 配置来提取常用库,引用外链

    具体查看官方文档:https://webpack.docschina.org/configuration/externals/

vue-cli项目打包优化(webpack3.0)的更多相关文章

  1. vue cli 3 打包过大问题

    vue cli 3 打包命令 npm run build,这种情况下的打包可以通过设置 vue.config.js里面的 productionSourceMap: false. 如果是自己设置的打包环 ...

  2. vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

    从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...

  3. Vue Cli 3 打包上线 静态资源404问题解决方案

    报错原因:静态资源丢失 解决方案 官方文档https://cli.vuejs.org/zh/config/#vue-config-js baseUrl 从 Vue CLI 3.3 起已弃用,请使用pu ...

  4. vue大型项目高性能优化----想说爱你真的不容易

    一.背景   目前公司的电子合同采用表单设计器+合同业务配合实现,做了半年多后终于上线,但是下边员工普遍反映卡顿,甚至卡死,爆栈.尤其是新增和修改合同页面,因为这部分数据量大,逻辑复杂,很容易崩溃,所 ...

  5. 将vue的项目打包后通过百度的BAE发布到网上的流程

    经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. ...

  6. @vue/cli 3 打包文件读取绝对路径处理

    @vue/cli 3 封装了 webpack.config.js,一般都在 vue.config.js 里面配置,官网不推荐在 webpack 的 output 处理,这里踩了一下坑,希望可以帮到后面 ...

  7. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

  8. vue.js项目打包上线

    最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架 ...

  9. vue之项目打包部署到服务器

    这是今年的第一篇博客.整理一下vue如何从项目打包到部署服务器,给大家做下分享,希望能给大家带来或多或少的帮助,喜欢的大佬们可以给个小赞,如果有问题也可以一起讨论下. 第一步:这是很关键的一步.打开项 ...

随机推荐

  1. LeetCode 278

    First Bad Version You are a product manager and currently leading a team to develop a new product. U ...

  2. 基于asp.net的ajax分页

    直接贴代码: <html> <head> <meta http-equiv="Content-Type" content="text/htm ...

  3. appium api

    AppiumDriver getAppStrings()      默认系统语言对应的Strings.xml文件内的数据.iOS driver.getAppStrings(Stringlanguage ...

  4. 代码对齐 分类: C#小技巧 2014-04-17 14:45 166人阅读 评论(0) 收藏

    开发项目时,为了是代码层次清晰.美观,常常需要调整多行,使之对齐.在网上也看到一些方法,感觉不好用,偶尔发现一个小技巧. (1)多行代码同时右移 同时选中几行,按"Tab"键,就会 ...

  5. Java开源运行分析工具(转)

      FProfiler  FProfiler是一个非常快的Java profiler.它利用BCEL和log4j来记录每个方法从开始到结尾的日记.FProfiler可以用来在你的应用程序,Servle ...

  6. jdk源码-&gt;多线程-&gt;Thread

    线程的创建 java提供了三种创建线程的方法: 通过继承 Thread 类本身: 通过实现 Runnable 接口: 通过 Callable 和 Future 创建线程. 继承Thread类 步骤: ...

  7. WebSocket(5)---多人聊天系统

    多人聊天系统 功能说明:多人聊天系统,主要功能点: 1.当你登陆成功后,可以看到所有在线用户(实际开发可以通过redis实现,我这边仅仅用map集合) 2.实现群聊功能,我发送消息,大家都可以看到. ...

  8. element vue Array数组和Map对象的添加与删除

    使用场景: 一个后台系统中, 管理员要配置自定义字段后台要生成id和title,其他角色要使用自定义字段的表单, 添加数据, 但是每个要填写的对象的id 和title都是无法固定的,因此页面显示的ti ...

  9. 编程之法section II: 2.2 和为定值的两个数

    ====数组篇==== 2.2 求和为定值的两个数: 题目描述:有n个整数,找出其中满足两数相加为target的两个数(如果有多组满足,只需要找出其中一组),要求时间复杂度尽可能低. 解法一: 思路: ...

  10. Linux---关闭Elasticsearch进程,并重新启动

    有时候,当我们启动elasticsearch之后, 经过很长一段时间没有操作, 自己已经忘了是否已经启动了elasticsearch, 这时候我们可以通过下面的方式验证是否启动,并重新启动: step ...