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项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  2. vue cli 3 打包过大问题

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

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

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

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

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

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

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

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

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

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

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

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

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

  9. vue.js项目打包上线

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

随机推荐

  1. vue权限路由实现方式总结

    使用全局路由守卫 实现 前端定义好路由,并且在路由上标记相应的权限信息 const routerMap = [ { path: '/permission', component: Layout, re ...

  2. dev中文本框等获取焦点事件

    <ClientSideEvents GotFocus="GotFocus" /> editContract.SetFocus()//设置文本框等的焦点 function ...

  3. Promise异步编程整理

    1.单线程模型 单线程模型指的是,JavaScript 只在一个线程上运行.也就是说,JavaScript 同时只能执行一个任务,其他任务都必须在后面排队等待. 注意,JavaScript 只在一个线 ...

  4. 数组的strong copy理解

      一.数组的不同情况下的copy,mutablecopy分析 1.不可变数组的copy(没有创建新对象,复制的只是指针)       2.不可变数组的mutable copy(创建新对象)     ...

  5. 斐波那契堆(Fibonacci heap)原理详解(附java代码实现)

    前言 斐波那契堆(Fibonacci heap)是计算机科学中最小堆有序树的集合.它和二项式堆有类似的性质,但比二项式堆有更好的均摊时间.堆的名字来源于斐波那契数,它常用于分析运行时间. 堆结构介绍 ...

  6. hdu 3295 模拟过程。数据很水

    An interesting mobile game Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Ja ...

  7. js 中的console.log有什么作用

    主要是方便你调式javascript用的.你可以看到你在页面中输出的内容. 相比alert他的优点是: 他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是co ...

  8. CSS选择器之伪类选择器(伪元素)

    selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...

  9. IDEA操作maven时控制台中文乱码

    windows环境下,Intellij idea12中maven操作时,控制台中文乱码问题(编译报错或者clean install时出现的其他错误描述乱码) 在cmd中mvn中文正常显示,log4j打 ...

  10. 实验二:klee处理未建模函数和处理error的方式

    首先,能够分析klee源码固然重要.但是目前尚未到那个地步.我按照我的过程,记录和分析我所做的实验. 结论性内容是: 1.klee处理printf传入符号值的情形时,报为error,不会将符号值具体化 ...