我来了……

前端模块化打包新行情2

关于前端打包技术行情,参考我的上一篇文章:前端打包技术行情

模块化开发仍是前端开发的主要开发方式,但是打包和以往不同了。以往的模块化开发,往往是大家熟知的基于第三方框架做的模块化,比如AMD和CMD等,都需要借助第三方模块加载器。打包的过程也是分析文件依赖,比如把依赖超过4次的文件打包到core.js里面,然后保留一个入口文件,多个页面就是多个入口这样。最后把静态资源发布到cdn,整个流程也还好,只是不太方便。

现在模块化开发,主流都是基于ES6的模块开发,基于es6 pollyfill和第三方打包工具tree shake的技术,可以实现比较好的兼容性和性能。现在h5开发占半壁江山,更是如此。现在主流的开发模式是以页面为区分,以性能为导向,强调页面秒开,加载和响应速度。每个页面可以做个打包,模块共享可以借助es6 和npm 管理node_module,主导的思想还是尽量减少模块之间的依赖,这样轻便的打包开发模式就产生了。

基于rollup就可以很好地实现,可以参考我做的基于lapp框架 开发的脚手架开发库:lapp_startup ,开发起来真的很是爽。

欢迎大家给我点星星,也欢迎大家使用lapp进行开发,lapp支持 class和函数式编程两种模块开发方式,基于JSX 模板开发模式,开发起来真的很快!

// button component
import { l } from "lapp"


const state = {
    count: 0
}

export const actions = {
    addCount: () => {
        state.count++;
        MyButtonView.$update()
    }
}

export const MyButtonView = ({props, children}) =>(
    <button onClick={actions.addCount} {...props}>{children}{state.count}</button>
)

 

//main component
import { l, app } from "lapp"
import { MyButtonView, actions as MyButtonAction } from "../component/button/button"

let state = {
    aa: -1,
    bb: -1,
    checked: true,
    data: [{ name: "11", href: "22" }, { name: "33", href: "44" }]
}

const actions = {
    log: (e) => {
        console.log(e.target.value);
        state.inputVal = e.target.value
        MyButtonAction.addCount()
    },
    handleClick: () => {
        state.data.push({ name: "77", href: "88" })
        BoxView.$update()
    },
    handleCheck: (e) => {
        state.checked = !state.checked
        console.log(state.checked)
        BoxView.$update()
    },
    compute: (data) => {
        let dd = []
        state.data.forEach((item, index) => {
            dd.push(<div class="title">
                {item.name}
            </div>)
        })
        return dd
    }
}

const BoxView = ({ props, children }) => (<ul style="list-style: none;">
    &yen;
    <li className="item" onClick={() => alert('hi!')}>item 1</li>
    <li className="item">
        <input type="checkbox" checked={state.checked} onChange={actions.handleCheck} />
        <input type="text" style="border:1px solid #f40000;" onInput={actions.log} />
        <p>{state.inputVal}</p>
    </li>
    <li onClick={actions.handleClick} forceUpdate={true}>text</li>
    <MyButtonView className="button">hello, button</MyButtonView>
    {actions.compute(state.data)}
</ul>
);

//main
console.time("render virtual DOM with FP")
app(document.querySelector("#app"), BoxView, MyButtonView)
console.timeEnd("render virtual DOM with FP")

 

未经允许不得转载:前端学堂fed123 » 前端模块化打包新行情2

分享到:更多 ()