vue + webpack +vue-cli@2.0打包注意事项总结(打包路径、打包后文件大小,组件引入等)
以下是用vue-cli@2.0构建的后台管理系统中总结出来的打包注意事项1,运行已有发布环境打包命令 npm run build 以后,的dist文件夹放到本地部署的tomcat中运行,找不到文件 原因是,官方配置文件 config/index.js中配置的 ‘assetsPublicPath‘属性(即打包时,output的文件路径),将build中的assetsPublic...
以下是用vue-cli@2.0构建的后台管理系统中总结出来的打包注意事项
1,运行已有发布环境打包命令 npm run build 以后,的dist文件夹放到本地部署的tomcat中运行,找不到文件
原因是,官方配置文件 config/index.js中配置的 ‘assetsPublicPath‘属性(即打包时,output的文件路径),将build中的assetsPublicPath改成‘./’;
注意,dev中的assetsPublicPath不要改,否则 npm run dev会报错
2,vue-cli默认开启eslint检查语法,比较严格
关闭方法:1》 config/index.js dev对象中,把useEslint的值改为false;
2》文件头部加一个 /*eslint-disable*/
*******************************************************************分割线***********************************************************************
打包优化
3, 打包速度优化
默认production环境是开启sourceMap的,打包速度会比较慢,可以在config/index.js 的build对象中,把productionSourceMap属性改为false,这样打包出来的文件中不会有map文件,打包速度会提升
4,在build/webpack.base.config.js里配置resolve.modules属性,配置模块库(即 node_modules)所在的位置,加快打包速度
module.exports = {
resolve: {
extensions: ['.js', '.vue', '.json'],
modules: [
resolve('src'),
resolve('node_modules')
],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
5,loader中配置include和exclude,减少不必要的遍历
include 包括路径,
exclude,排除路径
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
exclude: /node_modules/
},
6,默认使用uglifyjs-webpack-plugin来压缩文件,但是是单线程压缩,速度很慢,可以改用 webpack-parallel-uglify-plugin 插件,它可以并行运行 UglifyJS 插件,从而更加充分、合理的使用 CPU 资源,从而大大减少构建时间
1》npm i webpack-parallel-uglify-plugin -save-dev
2》build/webpack.prod.conf.js 文件
如果报错,可能是版本问题,安装一个低一点的版本
//默认配置
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
//改成如下
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
new ParallelUglifyPlugin({
cacheDir: '.cache/',
uglifyJS:{
output: {
comments: false
},
compress: {
warnings: false
}
}
}),
7,用happypack加速代码构建
运行在 Node.js 之上的 Webpack 是单线程模型的,而 HappyPack 的处理思路是:将原有的 webpack 对 loader 的执行过程,从单一进程的形式扩展多进程模式,从而加速代码构建
1》npm i happypack
2》 build/webpack.base.conf.js中,修改为
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
module.exports = {
module: {
rules: [
{
test: /\.js$/,
//把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行
loader: 'happypack/loader?id=happyBabel',
include: [resolve('src')],
//排除node_modules 目录下的文件
exclude: /node_modules/
},
]
},
plugins: [
new HappyPack({
//用id来标识 happypack处理那里类文件
id: 'happyBabel',
//如何处理 用法和loader 的配置一样
loaders: [{
loader: 'babel-loader?cacheDirectory=true',
}],
//共享进程池
threadPool: happyThreadPool,
//允许 HappyPack 输出日志
verbose: true,
})
]
}
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
8,打包后文件大小
可以把一些不经常变化的文件在index.html文件中用script标签引入,而不是在main.js中用import引入(前者不会被打包到app或者vendor文件中,这样这几个文件大小不会太大),引入后,需要在build/webpack.base.config.js中加入以下配置,告知webpack这些文件不需要打包,例如 axios、element-ui,echarts、g2等插件
externals:{
'axios': 'axios',
'Vue': 'Vue',
'element-ui': 'ELEMENT',
'G2':'G2',
'DataSet': 'DataSet'
}
9,引入UI框架
为防止引入UI框架后,打包文件过大,可采取两种方法(以element-ui为例):
1》按需引入,按照官网文档操作即可
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
注意:按需引入需要在babel里设置plugins,添加component项 同时需要安装npm install babel-plugin-component -save-dev
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
2》在index.html中用script标签引入
详细步骤,1)index.html引入index.css 和 index.js 文件
2)main.js中去掉按需引入或者全部引入的element-ui语句
3) build/webpack.base.config.js中配置externals属性,添加‘element-ui’: ‘ELEMENT’,操作类似方法4
4)main.js中加 Vue.use(ELEMENT,{size: 'small', zIndex: 1000})
10,抽离出css等样式文件,
安装 npm install extract-text-webpack-plugin -save-dev
在module里面添加loader,同时在plugins中添加以下代码,在一个环境中,两者必须同时配置,否者会报错
{
test: /\.(scss|sass)$/,
use: ExtractTextPlugin.extract({
use: ['css-loader', 'sass-loader'],
fallback: 'style-loader'
})
// loader: 'style-loader!css-loader!sass-loader'
},
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
allChunks: true,
}),
11,打包压缩文件
该配置需要服务器同步支持读取gzip格式文件
前端配置如下:
1》config/index.js 中 productionGzip: true, 如果是false,则改为true
2》npm install --save-dev compression-webpack-plugin
12,路由懒加载
当页面过多时,需要在路由配置文件中,配置成路由懒加载
{
path:'',
name:'',
component: resolve => require(['@/views/partner/PartnerListView.vue'],resolve)}
}
或者
{
path: '',
name:'',
component: resolve => {
require.ensure(['./home.vue'], () => {
resolve(require('./home.vue'))
})
}
}
更多推荐
所有评论(0)