这是一个创建于 2720 天前的主题，其中的信息可能已经有所发展或是发生改变。
最初用 vue init webpack-simple 创建了个项目， 写了一些东西，执行 npm run build 后打出了 800+kb 大小的 build.js， 不知道是什么原因它有这么大的体积，请高手指点下改进方式,谢谢了：
以下是我的配置: <<package.json>>
"scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { "iview": "^2.0.0-rc.16", "vue": "^2.3.3", }, "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-preset-env": "^1.5.1", "cross-env": "^3.0.0", "css-loader": "^0.25.0", "file-loader": "^0.9.0", "iview": "^2.0.0-rc.16", "node-sass": "^4.5.0", "sass-loader": "^5.0.1", "script-loader": "^0.7.0", "style-loader": "^0.18.2", "url-loader": "^0.5.9", "vue-loader": "^12.1.0", "vue-template-compiler": "^2.3.3", "webpack": "^2.6.1", "webpack-dev-server": "^2.4.5" }
<<webpack.config.js>> var path = require('path') var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
{
test: /iview.src.?js$/,
loader: 'babel-loader'
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /.(gif|jpg|png|woff|svg|eot|ttf)??.$/,
use: ['url-loader']
}
]
}, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: false } //↑devtool: '#eval-source-map' //↓module.exports.devtool = '#source-map' if (process.env.NODE_ENV === 'production') { module.exports.devtool = false // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: false, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }
<<index.html>> 引入一些 cdn 和本地资源， 加起来目测 100kb 左右
<<main.js>> import Vue from 'vue' import App from './App.vue' import Modal from 'iview/src/components/modal'; import 'iview/dist/styles/iview.css' Vue.use(Modal) new Vue({ el: '#app', render: h => h(App) })
 |
1
zhuangtongfa 2017-06-14 13:28:05 +08:00
用 vue init webpack myproject 默认打包很小的, webpack-simple 不清楚
|
 |
2
ChefIsAwesome 2017-06-14 13:36:19 +08:00  1
|
 |
3
airyland 2017-06-14 14:29:54 +08:00
看你用的库有没有帮你处理按需引入，或者说有没有相关的说明文档。一般直接从模块名引入都是打包了整个组件库。
|
 |
4
xrr2016 2017-06-14 20:08:50 +08:00
去掉 Sourcemap 会小很多
|
Select Language