项目开发webpack的一些细节效率优化
a)去除console:在build/webpack.prod.conf.js
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,//去除console.log
pure_funcs: ['console.log'],//去除console.log
},
sourceMap: false,
}),
b)去除打包的.map:config/index.js
productionSourceMap: false,
vue组件按需加载:参考文档 vue-router官方文档
const abc = () =>import ('@/components/abc')
export default new Router({
routes: [
{
path: '/abc',
name: 'abc',
component: abc
},
]
})
vConsole 手机网页的前端开发者调试
参考教程: vConsole
手机效果预览:
js拼接字符串生成html中不能给中间的变量加逻辑
我在字符串拼接的过程中有一个简单的逻辑需要判断,但是加入到字符串中会导致后面的字符串无法拼接直接被忽略,
...
+'<span class='+data.main.example?"checked":""+'></span>'+
...
比如这个就会直接输出checked
或
,所有的字符全部失效。
解决方案,给逻辑判断加括号。
...
+'<span class='+(data.main.example?"checked":"")+'></span>'+
...