基于vue-cli的webpack配置优化
基于vue-cli
优化的webpack
配置
大概分为以下几点
- 通过
externals
配置来提取常用库,引用外链 - 配置
CommonsChunkPlugin
提取公用代码 (vue-cli
已做) - 善用
alias
(vue-cli
配置了一部分) - 启用
DllPlugin
和DllReferencePlugin
预编译库文件 happypack
开启多核构建项目- 将
webpack-parallel-uglify-plugin
来替换webpack
本身的UglifyJS
来进行代码压缩混淆 - 升级
webpack
至3.x版本开启Scope Hoisting
externals
文档地址 https://doc.webpack-china.org...
防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
CommonsChunkPlugin
文档地址 https://doc.webpack-china.org...
CommonsChunkPlugin 插件,是一个可选的用于建立一个独立文件(又称作 chunk)的功能,这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来,最终合成的文件能够在最开始的时候加载一次,便存起来到缓存中供后续使用。这个带来速度上的提升,因为浏览器会迅速将公共的代码从缓存中取出来,而不是每次访问一个新页面时,再去加载一个更大的文件。
resolve.alias
文档地址 https://doc.webpack-china.org...
创建 import 或 require 的别名,来确保模块引入变得更简单。例如,一些位于 src/ 文件夹下的常用模块:
DllPlugin和DllReferencePlugin
文档地址 https://doc.webpack-china.org...
Dll打包以后是独立存在的,只要其包含的库没有增减、升级,hash也不会变化,因此线上的dll代码不需要随着版本发布频繁更新。使用Dll打包的基本上都是独立库文件,这类文件有一个特性就是变化不大。,只要包含的库没有升级, 增减,就不需要重新打包。这样也提高了构建速度。
一般是用于打包阶段
- 在
build
文件夹下新建webpack.dll.conf.js
文件
var path = require('path');
var webpack = require('webpack');
var AssetsPlugin = require('assets-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var config = require('../config');
var env = config.build.env;module.exports = {entry: {libs: ['babel-polyfill','vue/dist/vue.esm.js','vue-router','vuex','element-ui','echarts','mockjs',],},output: {path: path.resolve(__dirname, '../libs'),filename: '[name].[chunkhash:7].js',library: '[name]_library',},plugins: [new webpack.DefinePlugin({'process.env': env,}),new webpack.DllPlugin({path: path.resolve(__dirname, '../libs/[name]-mainfest.json'),name: '[name]_library',context: __dirname, // 执行的上下文环境,对之后DllReferencePlugin有用}),new ExtractTextPlugin('[name].[contenthash:7].css'),new webpack.optimize.UglifyJsPlugin({compress: {warnings: false,},}),new AssetsPlugin({filename: 'bundle-config.json',path: './libs',}),new CleanWebpackPlugin(['libs'], {root: path.join(__dirname, '../'), // 绝对路径verbose: true,dry: false,}),],module: {rules: [{test: /\.js$/,loader: 'babel-loader',},],},
};
- 在
build
文件夹下新建build-dll.js
文件
var path = require("path");
var webpack = require("webpack");
var dllConfig = require("./webpack.dll.conf");
var chalk = require("chalk");
var rm = require("rimraf");
var ora = require("ora");var spinner = ora({color: "green",text: "building for Dll..."
});
spinner.start();
rm(path.resolve(__dirname, "../libs"), err => {if (err) throw err;webpack(dllConfig, function(err, stats) {spinner.stop();if (err) throw err;process.stdout.write(stats.toString({colors: true,modules: false,children: false,chunks: false,chunkModules: false}) + "\n\n");console.log(chalk.cyan(" build dll succeed !.\n"));});
});
- 修改
webpack.prod.conf.js
文件
var bundleConfig = require("../libs/bundle-config.json");
...
...
plugins: [// 增加DllReferencePlugin配置new webpack.DllReferencePlugin({context: __dirname,manifest: require("../libs/libs-mainfest.json") // 指向生成的manifest.json}),......new HtmlWebpackPlugin({...// 增加两个变量libJsName: bundleConfig.libs.js,libCssName: bundleConfig.libs.css,}),......// 增加一个静态文件目录new CopyWebpackPlugin([......{from: path.resolve(__dirname, "../libs"),to: config.build.assetsSubDirectory,ignore: ["*.json"]}])
]
- 修改模版文件
index.html
<body><div id="app"></div><!-- built files will be auto injected --><% if (htmlWebpackPlugin.options.libCssName){ %><link rel="stylesheet" href="./static/<%= htmlWebpackPlugin.options.libCssName %>"><% } %><% if (htmlWebpackPlugin.options.libJsName){ %><script src="./static/<%= htmlWebpackPlugin.options.libJsName %>"></script><% } %>
</body>
- 修改
package.json
,增加scripts
"scripts": {// 增加"dll": "node build/build-dll.js"
},
npm run dll
先执行预编译,然后在打包项目文件,如果引入的类库文件没有变更就不再需要再次执行预编译
happypack
文档地址 https://github.com/amireh/hap...
一般node.js是单线程执行编译,而happypack则是启动node的多线程进行构建,大大提高了构建速度。
在插件中new一个新的happypack进程出来,然后再使用使用loader的地方替换成对应的id
- 修改
webpack.base.conf.js
文件
var HappyPack = require('happypack');
var os = require('os');
var happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
...
...
// 增加pluginsplugins: [new HappyPack({id: 'happy-babel-js',loaders: ['babel-loader?cacheDirectory=true'],threadPool: happyThreadPool,})
]
...
...
// 修改对应loader
{test: /\.js$/,loader: 'happypack/loader?id=happy-babel-js',include: [resolve('src'), resolve('test')],
}
webpack-parallel-uglify-plugin
文档地址 https://github.com/gdborton/w...
webpack
提供的UglifyJS
插件由于采用单线程压缩,速度很慢 ,
webpack-parallel-uglify-plugin
插件可以并行运行UglifyJS
插件,这可以有效减少构建时间。
- 修改
webpack.prod.conf.js
文件
var ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
...
...
// 删掉webpack提供的UglifyJS插件
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false,
// drop_console: true
// },
// sourceMap: true
// }),
// 增加 webpack-parallel-uglify-plugin来替换
new ParallelUglifyPlugin({cacheDir: '.cache/',uglifyJS:{output: {comments: false},compress: {warnings: false}}
}),
webpack 3
webpack3新特性一览 https://juejin.im/entry/59714...
webpack 3.x 提供了一个新的功能:Scope Hoisting,又译作“作用域提升”。只需在配置文件中添加一个新的插件,就可以让 Webpack 打包出来的代码文件更小、运行的更快。
- 修改
webpack.prod.conf.js
...
...
plugins: [// 往plugins添加一个配置// ps 只针对es6的模块化有效new webpack.optimize.ModuleConcatenationPlugin(),
]
ps:配置文件详情请点击 https://github.com/liaoyinglo...
基于vue-cli的webpack配置优化相关推荐
- vue项目通过命令行传参实现多环境配置(基于@vue/cli)
大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了 npm run ...
- vue中webpack默认配置_Vue-cli 中 Webpack 配置优化(一)
一.前言 最近一段时间在学习 Webpack 方面的知识.在学习的过程中主要配置的是 webpack.config.js 文件. 但是在 Vue-cli 3.x 下,已经对 Webpack 做了深度的 ...
- 基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
- 一次基于Vue.Js的用户体验优化 (vue drag)
一.写在前面 半年以前,第一次在项目上实践VueJs,由于在那之前,没有Angular,avalon等框架的实践经验,所以在Vue的使用上,没有给自己总结出更多的经验和体验.随着项目进行和优化改版,无 ...
- 基于Vue项目打包上线配置
打包上线 开发阶段 : npm run serve 发布阶段 : npm run build build之前 1. 把基准地址, 由开发阶段的换成发布阶段的 //main.js axios.defau ...
- 怎么把HTML网页重构为VUE,基于vue cli重构多页面脚手架过程详解
官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考. ...
- vsc写vue生成基本代码快捷键_基于vue2.X的webpack基本配置,教你手动撸一个webpack4的配置...
webpack说复杂也不复杂.不复杂,核心概念不外乎是entry, output, loader, plugins.webpack4还新增了optimization选项,用于代码分割和打包优化.现在w ...
- uglifyjs报错 webpack_基于vue2.X的webpack基本配置,教你手动撸一个webpack4的配置
webpack说复杂也不复杂.不复杂,核心概念不外乎是entry, output, loader, plugins.webpack4还新增了optimization选项,用于代码分割和打包优化.现在w ...
- 基于vue的响应式ui框架_基于Vue.js的响应式和可配置UI框架
基于vue的响应式ui框架 Framevuerk (Framevuerk) Fast, Responsive, Multi Language, Both Direction Support and C ...
最新文章
- 无法加载指定的元数据资源(转载)
- 怎么提高python能力_怎样提高python分析数据能力?
- 动态切换父元素隐藏和显示里面的子元素的动画会再一次执行吗?
- linux命令date的功能,Linux 命令date
- 修改默认python版本
- mysql数据库优化方向
- OBV指标交易策略(累积能量潮与移动能量潮,成交量多空比率净额及相关应用原则)
- 什么是面形误差PVr?【光学测量、光学设计必看】
- Local time zone must be set-see zic manual page
- GIT 中如何打标签
- ❤️大学三年沉淀,把我的学习经验分享给你,爆肝万字带你走进编程世界!❤️
- 将文本转为语音文件的各种TTS
- 强烈安利一波,程序猿学习网站
- iOS MultipeerConnectivity
- 开源免费的对象存储Minio
- [Julia语言]使用Chudnovsky 算法快速计算圆周率 Pi (π) 值
- C语言求1000以内的素数
- Linux安装Redis、远程连接Redis
- vlink的其他应用场景
- GCN-图卷积神经网络算法简单实现(含python代码)