最初用 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) })
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.