介于webpack 打包之后代码不精简，注入代码较多，没有使用的代码，也进行打包，导致体积变大，特意研究了rollup 打包js文件
1、rollup.config.js 打包配置
import resolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import {uglify} from 'rollup-plugin-uglify'
import {minify} from 'uglify-js'
import vue from 'rollup-plugin-vue'
import buble from 'rollup-plugin-buble'
import autoprefixer from 'autoprefixer'
const pathName = 'public/static/js/'
const config = []
const files = {
'1.0.0/utils/index.js':'src/widget/utils.js',
'1.0.0/polyfill/index.js': 'src/widget/polyfill.js',
'1.0.0/ajax/index.js': 'src/widget/ajax.js',
'1.0.0/store/index.js': 'src/widget/store.js',
'1.0.0/request/index.js': 'src/widget/request.js',
'1.0.0/validate/index.js': 'src/widget/validate.js',
'1.0.0/filter/index.js': 'src/widget/filter.js',
'1.0.0/loading/index.js': 'src/components/loading/index.js',
'1.0.0/showModal/index.js': 'src/components/showModal/index.js',
'1.0.0/toast/index.js': 'src/components/toast/index.js',
'1.0.0/lazyLoad/index.js': 'src/components/lazyLoad/index.js',
'1.0.0/swiper/index.js': 'src/components/swiper/index.js',
'1.0.0/downloadApp/index.js': 'src/components/downloadApp/index.js',
'1.0.0/header/index.js': 'src/components/header/index.js',
'user/personal.js': 'src/pages/user/personal.js',
'index.js': 'src/pages/index/index.js',
}
Object.keys(files).forEach((item) => {
const configItem = {
input: files[item],
output: {
format: 'iife',
file: pathName + item
},
plugins: [
alias({
resolve: [".js", ".vue"],
entries: [{
find:'@',
replacement: path.resolve(__dirname, 'src')
}]
}),
commonjs(),
vue({
template: {
isProduction: process.env.NODE_ENV == 'production' ? true : false
},
style: {
postcssPlugins: [autoprefixer]
}
}),
resolve(),
babel({
exclude: '**/node_modules/**'
}),
buble()
]
}
if (process.env.NODE_ENV == 'production') {
configItem.plugins.push(uglify({}, minify))
}
config.push(configItem)
})
export default config2、webpack.config.js 打包配置
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const path = require('path')
module.exports = {
entry: {
'1.0.0/utils/index':'./src/widget/utils.js',
'1.0.0/polyfill/index': './src/widget/polyfill.js',
'1.0.0/ajax/index': './src/widget/ajax.js',
'1.0.0/store/index': './src/widget/store.js',
'1.0.0/request/index': './src/widget/request.js',
'1.0.0/validate/index': './src/widget/validate.js',
'1.0.0/filter/index': './src/widget/filter.js',
'1.0.0/loading/index': './src/components/loading/index.js',
'1.0.0/showModal/index': './src/components/showModal/index.js',
'1.0.0/toast/index': './src/components/toast/index.js',
'1.0.0/lazyLoad/index': './src/components/lazyLoad/index.js',
'1.0.0/swiper/index': './src/components/swiper/index.js',
'1.0.0/downloadApp/index': './src/components/downloadApp/index.js',
'1.0.0/header/index': './src/components/header/index.js',
'user/personal': './src/pages/user/personal.js',
'index': './src/pages/index/index.js',
},
output: {
path: path.resolve(__dirname, './public/static/js'),
filename: '[name].js'
},
module: {
rules: [{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.vue$/,
loader: 'vue-loader'
}, {
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
},{
test: /\.(png|jpg|gif)$/i,
use: [{
loader: 'url-loader',
options: {
limit: 10000,
}
}]
}]
},
resolve:{
extensions:['*','.js','.json','.scss','.css'],
alias: {
'@': path.resolve('src')
}
},
plugins: [
new UglifyJsPlugin({
parallel: 4,
uglifyOptions: {
output: {
comments: false,
beautify: true
},
compress: {},
warnings: false
},
cache: true
}),
new VueLoaderPlugin()
]
}
执行命令
"scripts": {
"build": "sudo NODE_ENV=production rollup -c",
"dev": "sudo rollup -c -w",
"dev:webpack": "sudo webpack-cli --mode development --watch",
"build:webpack": "sudo webpack-cli --mode production"
}3、.babelrc 配置
{
"presets": [
[
"env",
{
"modules": false
}
]
],
"plugins": [
"external-helpers"
]
}
4、package.json
"devDependencies": {
"@rollup/plugin-replace": "^2.2.0",
"autoprefixer": "^9.7.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^3.0.0",
"file-loader": "^4.2.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^7.0.1",
"gulp-htmlmin": "^5.0.1",
"gulp-replace": "^1.0.0",
"gulp-sass": "^4.0.2",
"node-sass": "^4.12.0",
"postcss-loader": "^3.0.0",
"precss": "^4.0.0",
"rollup": "^1.26.0",
"rollup-plugin-alias": "^2.2.0",
"rollup-plugin-babel": "^3.0.7",
"rollup-plugin-buble": "^0.19.8",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-html": "^0.2.1",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-postcss": "^2.0.3",
"rollup-plugin-uglify": "^6.0.3",
"rollup-plugin-vue": "^5.1.2",
"sass-loader": "^7.3.1",
"style-loader": "^0.23.1",
"uglify-js": "^3.6.6",
"uglifyjs-webpack-plugin": "^2.1.3",
"url-loader": "^2.2.0",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.35.0",
"webpack-parallel-uglify-plugin": "^1.1.0"
}两者区别
1、webpack 打包体积大，注入代码多，代码不精简，功能强大，社区活跃，使用人数多。
2、rollup 打包体积小，代码精简，较少注入，动态加载路由代码不能用，所以单页项目不合适，项目使用人不多，支持的插件较少。
3、rollup 对打包vue 文件，vue文件插件支持vue编译较少。
4、如有单独的js 基础类适合用rollup 打包，如有react/vue 打包建议用webpack，必要时 两者都用，也不错。
5、项目打包webpack 122kb rollup 94.3kb 差别多了27.7kb 大小。
