一、新建项目
使用 vue-cli2构建一个初始的Vue项目：vue init webpack cli2_base
二、正式优化
1、将 productionSourceMap 设为 false
在config/index下，在build下，将productionSourceMap的值设为false
2、图片压缩
vue正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积
(1) 先安装依赖：cnpm install image-webpack-loader --save-dev
(2) 找到build/webpack.base.conf.js
将原始的这块配置
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
{
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
}
改为以下配置
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
// 图片压缩的
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true
}
}
]
}
3、cdn配置（可选）
(1) 在build/utils.js最下面，新增以下代码：
/**------------------ 下面是新增 ------------------*/
// 国内免费cdn镜像源
const cdnBaseHttp = 'https://cdn.staticfile.org'
// 是否使用cnd的js，默认：dev不使用，prod使用
const isExternalJs = process.env.NODE_ENV === 'production'
// process.env.NODE_ENV === 'production'
/* cdn配置
name：模块名称，与package.json同名，如：element-ui
scope：模块作用域命名，对应window里面挂载的变量名称，如：ELEMENT
js：js地址，是从版本号后面开始的，如：完整js cnd为 https://cdn.staticfile.org/element-ui/2.4.11/index.js，则应该填写的为：index.js
css：css地址，是从版本号后面开始的，如：完整css cnd为 https://cdn.staticfile.org/element-ui/2.4.11/theme-chalk/index.css，则应该填写的为：theme-chalk/index.css
*/
const cdnConfig = [
{ name: 'vue', scope: 'Vue', js: 'vue.min.js' },
{
name: 'vue-router',
scope: 'VueRouter',
js: 'vue-router.min.js',
cndHttp: 'https://cdn.bootcss.com' // 当不使用默认的cnd镜像源时，可以配置这个
},
// 配置 element-ui 示例，前提是要安装依赖哦！！！
// {
// name: 'element-ui',
// scope: 'ELEMENT',
// js: 'index.js',
// css: 'theme-chalk/index.css',
// cndHttp: 'https://cdn.bootcss.com' // 当不使用默认的cnd镜像源时，可以配置这个
// }
]
// 获取模块版本号
function getModulesVersion() {
let mvs = {}
let regexp = /^npm_package_.{0,3}dependencies_/gi
for (let m in process.env) {
// 从node内置参数中读取，也可直接import 项目文件进来
if (regexp.test(m)) {
// 匹配模块
// 获取到模块版本号
mvs[m.replace(regexp, '').replace(/_/g, '-')] = process.env[
m
].replace(/(~|\^)/g, '')
}
}
return mvs
}
// 1、生成完成的cdnConfig；2、处理忽略的资源
function getExternalModules(config) {
let externalModules = {} // 要忽略的资源，如 {vue: 'Vue'}
let dependencieModules = getModulesVersion() // 获取全部的模块和版本号
config = config || cdnConfig // 默认使用utils下的配置
config.forEach(item => {
// 遍历配置
if (item.name in dependencieModules) {
let version = dependencieModules[item.name]
let currCdnHttp = item.cndHttp || cdnBaseHttp
// 拼接完整 css 的链接
item.css =
item.css &&
[currCdnHttp, item.name, version, item.css].join('/')
// 拼接完整 js 的链接
item.js =
item.js && [currCdnHttp, item.name, version, item.js].join('/')
// 新增要忽略的资源
externalModules[item.name] = item.scope
} else {
throw new Error(item.name + ' 未安装，请执行cnpm i -S' + item.name)
}
})
// 根据isExternalJs，判断是否真正要忽略
return isExternalJs ? externalModules : {}
}
// 用在 webpack.base.conf.js 里面
exports.externalModules = getExternalModules()
// 用在 webpack.dev.conf.js/webpack.prod.conf.js 里面
exports.cdnConfig = cdnConfig
// 用在 webpack.dev.conf.js/webpack.prod.conf.js 里面
exports.isExternalJs = isExternalJs
/**------------------ 上面是新增 ------------------*/
(2) 在build/webpack.base.conf.js的module.exports里面新增
// 构建时忽略的资源
module.exports = {
// ...以上是之前的配置，不做任何改变
// 只新增下面的一句代码
externals: utils.externalModules
}
(3) 在build/webpack.dev.conf.js的new HtmlWebpackPlugin里面新增
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
// ===========以下是新增的===============
cdnConfig: utils.cdnConfig, // cdn配置
isExternalJs: utils.isExternalJs //是否加载js，dev下默认不加载
})
(4) 在build/webpack.prod.conf.js的new HtmlWebpackPlugin里面新增
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
// ===========以下是新增的===============
cdnConfig: utils.cdnConfig, // cdn配置
isExternalJs: utils.isExternalJs //是否加载js，prod下默认加载
})
(5) 在index.html新增
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- ============以下是新增的============= -->
<!-- cnd 加载css start-->
<% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){
if(item.css){ %>
<link href="<%= item.css %>" rel="stylesheet" />
<% }}) %>
<!-- cnd 加载css end-->
<!-- ============以上是新增的============= -->
<title>cli2_base</title>
</head>
<body>
<div id="app"></div>
<!-- ============以下是新增的============= -->
<!-- cnd 加载js start-->
<% if(
htmlWebpackPlugin.options.isExternalJs){htmlWebpackPlugin.options.cdnConfig.forEach(function(item){
if(item.js){ %>
<script type="text/javascript" src="<%= item.js %>"></script>
<% }})} %>
<!-- ============以上是新增的============= -->
<!-- cnd 加载js end-->
<!-- built files will be auto injected -->
</body>
</html>
(6) 在src/router/index.js修改
将
Vue.use(Router)
改为
if (!window.VueRouter) Vue.use(Router)
(7) 重新启动npm run dev即可，现在的配置是开发环境，在浏览器的Network JS里面是看不到的。若想查看，请将build/utils.js里面的
const isExternalJs = process.env.NODE_ENV === 'production'
改为
const isExternalJs = true
然后再次重启npm run dev，然后浏览器查看Network JS
Network JS
4、代码压缩
vue-cli2已经使用UglifyJsPlugin插件来压缩代码，我们可以新增一些配置
在build/webpack.prod.conf.js下找到new UglifyJsPlugin，然后新增：
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
// =====以下是新增的=====
drop_console: true, // 删除页面中的 console.log
pure_funcs: ['console.log']
// =====以上是新增的=====
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
})
5、开启Gzip
(1) 安装依赖：cnpm install --save-dev compression-webpack-plugin
(2) 在config/index.js
productionGzip: false
改为
productionGzip: true
(3) 重新npm run build，若打包报错：
ValidationError: Compression Plugin Invalid Options
options should NOT have additional properties
则降低版本，重新安装cnpm install --save-dev compression-webpack-plugin@1.1.12
(4) 重新打包，将会生成.gz的文件。但真正要使用还需要后端的配合
6、异步路由 官方文档
在src/router/index.js将路由改成异步的
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
if (!window.VueRouter) Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
改为
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
if (!window.VueRouter) Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: () => import('@/components/HelloWorld')
}
]
})
网友评论